active.data.current gets lost "on drag end".
See original GitHub issueI have a draggable (also using an DragOverlay
) defined as such:
const { attributes, listeners, setNodeRef } = useDraggable({
id: `${type}_${id}`,
data: {
id,
type,
},
});
and I handle the onDragStart
and onDragEnd
where my DnDContext
is rendering. If I console log active.data.current
inside onDragStart
, I can see the data I provided. Unfortunately, once I let go of the mouse and the drop should happen, active.data.current
is just an empty object.
Using the latest version, I have no idea how to even replicate this bug or why this would ever happen. Any ideas?
Digging a little deeper, I see: https://github.com/clauderic/dnd-kit/blob/919f21af9382b88141b6305769836960d5844fa5/packages/core/src/components/DndContext/DndContext.tsx#L165 - “// It’s possible for the active node to unmount while dragging”. This is the only thing I see that would mess up with the data object and, it’s true, the container unmounts if I drag outside of it.
Is there any way to fix this gracefully or do I have to “suspend” my state somehow such that the item remains mounted until I finish my drag?
Issue Analytics
- State:
- Created a year ago
- Reactions:8
- Comments:5
I’m experiencing the same issue within a virtualized list when dragging the item far enough (meaning that the virtualization unmounts the original instance).
It seems a bug to me as the
data
information should be preserved on the active object, just like the id is preserved.@wiltsu @shawnshuang Assuming it is not a bug, as I noted, the only way for
active.data.current
to be missing is if the original draggable gets unmounted.If you have something complex, you can just run a
console.log
on unmount to see if your draggable’s really unmounting: