Skip to content

useWindowAsScrollContainer should not crawl to root node #577

@knarkunas

Description

@knarkunas

There is an issue with grid and useWindowAsScrollContainer. It should not be crawling up to first overflow: scroll|auto DOM element. As seen in getScrollingParent(this.container). Result is something like this using grid layout:
image_sort_bug_known
image_sort_bug_example

Or we could get a prop of some sort for grid layout when scroll is not used at all?
Like isScrollable and then this code:

this.scrollContainer = useWindowAsScrollContainer
          ? this.document.scrollingElement || this.document.documentElement
          : getScrollingParent(this.container) || this.container;

becomes

if (isScrollable) {
     this.scrollContainer = useWindowAsScrollContainer
               ? this.document.scrollingElement || this.document.documentElement
               : getScrollingParent(this.container) || this.container;
} else {
      this.scrollContainer = this.container;
}

Currently animateNodes inside SortableContainer.js does transformation and calculation ends up this.containerBoundingRect having to be root element (most websites has overflow scroll somewhere, right?).
edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width

Current workaround, if you want to have non scrollable, simple grid box layout and draggable list is to add <div style={{ overflow: 'auto' }}> around your SortableContainer. And do not forget to set useWindowAsScrollContainer to false.

Example to reproduce:
https://codesandbox.io/s/serene-dawn-rwpj0

Commit that might be affecting this issue:
#507

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions