clauderic / clauderic/react-sortable-hoc

useWindowAsScrollContainer should not crawl to root node

Open
#577 3 comments 8 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.9k
Forks
959
PR merge metrics
No merged PRs in 30d

Description

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](https://user-images.githubusercontent.com/37063113/61844495-511b6780-aea8-11e9-86ad-3919d6567684.gif)
![image_sort_bug_example](https://user-images.githubusercontent.com/37063113/61844502-5678b200-aea8-11e9-9e66-959ff52e0004.gif)

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 `

` 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:
https://github.com/clauderic/react-sortable-hoc/pull/507

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.