search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
11.9k stars 602 forks source link

@dnd-kit/react (beta). Wrong nested scrollable elements activating #1429

Closed AddMoreScripts closed 2 weeks ago

AddMoreScripts commented 2 weeks ago

Greetings! Thank you for publishing the experimental beta-branch in npm. I want to use @dnd-kit/react for kanban-board. But I encountered a bug.

I have one DragDropProvider and several nested scrollable elements with draggables located inside them (useDraggable({...})). When I start dragging the first element, everything works well, autoscroll works correctly.

But if then I start dragging an element from another container, the first container will still scroll. Is this a bug? or am I doing something wrong? I am attaching a video demonstration:

https://github.com/clauderic/dnd-kit/assets/52598143/2d64e6e9-8b4d-4eef-876a-b38214e16eaa

clauderic commented 2 weeks ago

Which version are you using? I've released several beta versions under the beta tag on npm

https://www.npmjs.com/package/@dnd-kit/react?activeTab=versions

AddMoreScripts commented 2 weeks ago

@clauderic screen recorded on 0.0.2-beta-20240610024106 I just saw the new beta version. Perhaps this bug is no longer there?

clauderic commented 2 weeks ago

That's a relatively recent version so likely still a bug. Can you create a small replication case in CodeSandbox or similar so I can investigate?

AddMoreScripts commented 2 weeks ago

@clauderic, yes, sure:

https://codesandbox.io/p/sandbox/dnd-kit-beta-gxm2lk?file=%2Fsrc%2FApp.tsx

clauderic commented 2 weeks ago

It's fixed now: https://codesandbox.io/p/sandbox/dnd-kit-beta-forked-yymnjq?file=%2Fpackage.json%3A9%2C24

Fixed by this commit: https://github.com/clauderic/dnd-kit/commit/1483a9f24d2891cb2eee838bc8e72288911dac38

Available in the latest beta release: 0.0.2-beta-20240610193339

Let me know if you run into any other issues with the beta packages :)

AddMoreScripts commented 2 weeks ago

@clauderic Thank you. I updated my version too. Unfortunately, scrolling now stops when the dragged element goes beyond the border of a scrollable div, whereas previously it continued at maximum speed in this case. But I think that my request is very specific, it may be very difficult to implement.

clauderic commented 2 weeks ago

I pushed a small tweak to the auto scroller that should make this behave more like most consumers would expect, try it out and let me know what you think.

AddMoreScripts commented 2 weeks ago

its work perfect, thankyou.