Autoscrolling while dragging in SortableContext does not stop scrolling when the container reaches final scroll position

[vladnicula]

Short (45sec explanation with codesandbox demo) https://www.loom.com/share/43c9f0e0d77744388b5cb86f06427ec9

Code sandbox with example: https://codesandbox.io/s/dnd-kit-drag-to-sort-exploration-lftzvt?file=/src/App.tsx:752-1120

[mahhmoud-enzyme]

Yeah I have the same issue

[psd-coder]

You can reach that by using DragOverlay. I forked and modified your sandbox here: https://codesandbox.io/s/dnd-kit-drag-to-sort-exploration-forked-n33v7p?file=/src/App.tsx

[vladnicula]

You can reach that by using DragOverlay. I forked and modified your sandbox here: https://codesandbox.io/s/dnd-kit-drag-to-sort-exploration-forked-n33v7p?file=/src/App.tsx

Thank you so much; this was precisely what we were looking for!

Should we close the issue now? Would it help to add a doc comment maybe about this?

I imagine others might encounter the same issue, which might hurt adoption when exploring this library if we don't mention this aspect anywhere.

[mahhmoud-enzyme]

@psd-coder This works great. I just have one problem with it. My sortableItem runs a web3 method on mount. you can think of it as an API call. therefore, whenever I drag the sortableItem, the drag overlay version of it runs the method again. is there any way to prevent it.

here is a short video demo https://www.loom.com/share/a9a3d9fb99ff402299696aae56888eed

[vladnicula]

You can create a placeholder, which runs different logic and presents a different UI than the normal one

https://www.loom.com/share/923c7b137a8a468a808852ac822caa64

https://codesandbox.io/s/dnd-kit-drag-to-sort-exploration-forked-hroxjm?file=/src/SortableItem.tsx

[piyapanw]

You can use modifier to get this job done.

1. import { restrictToFirstScrollableAncestor, restrictToParentElement, restrictToVerticalAxis, } from '@dnd-kit/modifiers';

2. update code: <DndContext modifiers = {[ restrictToFirstScrollableAncestor, restrictToParentElement, restrictToVerticalAxis]}

https://codesandbox.io/s/dnd-kit-drag-to-sort-exploration-forked-nvqes3?file=/src/App.tsx

[mahhmoud-enzyme]

Thanks @piyapanw

The restrictToParentElement modifier did it for me.