dnd-kit icon indicating copy to clipboard operation
dnd-kit copied to clipboard

Auto scroll is broken when using multiple containers

Open akantic opened this issue 1 year ago • 4 comments

First I want to give some praise to this repo, it's nothing short of amazing. Code is really neat with plenty to learn from and it is a really powerful tool. Thanks!

Nevertheless, I've found one other issue (besides experiencing this one - #1080), and now it's about the auto scroll feature.

If we take the official example from the story book (Multiple Containers - Basic Setup), and we limit the height of horizontally sortable containers and make their overflow-y to auto or scroll, then horizontal auto scroll becomes basically unusable.

Here is a video where I copied the code from this repo to recreate the same example from the storybook with the additions mentioned above. Notice how it breaks on empty containers, while it seems to work fine when there are items in them. I tried conditionally adding overflow-y property if there are multiple children present, but then it happens for non-empty containers and not for the empty ones.

https://user-images.githubusercontent.com/20325132/229306611-35b95d23-ed84-4fe4-9f2a-b66aa8d1e07f.mov

Literally just removing overflow-y fixes the jitter, but it would be neat if we would be able to scroll even vertically.

I already tried altering the autoScroll config:

  • disabling layoutShiftCompensation does not help
  • removing y axis scrolling does not help ( e.g. threshold: { x: 0.2, y: 0 } )
  • added a canScroll function to skip the nested containers from auto scrolling vertically and only allow scrolling horizontally in the parent container - does not work

Any help is appreciated, thanks!

akantic avatar Apr 01 '23 17:04 akantic

I'm facing the same issue, did you find a solution ?

andelkocvjetkovic avatar Dec 14 '23 07:12 andelkocvjetkovic

I found this, https://github.com/clauderic/dnd-kit/issues/1108. It solved my problem

andelkocvjetkovic avatar Dec 14 '23 08:12 andelkocvjetkovic

My solution is the linked PR above, I am using a patched local package of this repo.

akantic avatar Jan 31 '24 21:01 akantic

https://github.com/clauderic/dnd-kit/pull/1094 works well. You saved my time thank you :)

yungo1846 avatar Mar 18 '24 04:03 yungo1846