active.data.current gets lost "on drag end".

I 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?

[Fabianopb]

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.

[growthwp]

@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:

useEffect(() => {
  return () => {
    console.log('Unmounted.');
  }
}