Dnd-kit: active item loses order when dragged on Droppable

Question

I'm facing a problem using @dnd-kit. The soring part works well (for example when I start dragging 1st element it obvioeulsy does sort), but when I reach a droppable element (green Thrash), the sorting breaks and the 1st element goes back.

You can see live demo here: link

Is there any way to fix this?

Answer 1

The problem was in handlers. When a dragged item reaches outside of the original drop area (a list), there is no more over-item under it. This is when the dragOver handler used to crash, since it relies on over.id internally

Solution: https://codesandbox.io/s/dndkit-grid-with-drag-handle-example-forked-w4j3sn

1. Added checks for null and for id match
2. Moved deletion logic to dragEnd handler
3. Added state for dragged item reaching trash, so that list item can reflect it (becomes hidden)
4. List item is hidden when dragged + new prop is true
5. Moved Trash component out of original one, not critical tho