State is frozen after dragging between multiple containers

I’m working on a use-case where results can be dragged from a sidebar (and then removed from the sidebar) into a list of selected items.

After dragging one item from the sidebar list into the “selected” list, the state sometimes gets stuck. If it doesn’t get stuck, the transitions on the next drag event don’t completely work - the newest item in the list will stay in place, and other items kind of move around it.

I’ve been able to replicate a simplified version of my app in CodeSandbox: https://codesandbox.io/s/hopeful-brook-6j00k?file=/src/App.tsx

(Note: the “empty” useDroppable container isn’t fully implemented here, but that shouldn’t affect the issue in question, because I’m starting with a list that has a few items in it)

The monitor state in the DndContext component looks to be stuck on “dragEnd” - I’m not sure if this is just related to the issue, or if the issue is caused by that event somehow not ending.

[zrothauser]

Thanks @sanex3339! That was the issue here.

[sanex3339]

@zrothauser in your case you must not use useSortable inside of the DragOverlay => SearchResultItem component. Make a standalone version of SearchResultItem special for SearchResultItem

Im my case i don’t have any useSortable inside my DragOverlay components