Elements opacity is not being reset with multiple Draggable elements

[sscaff1]

Here is a codesandbox with the issue. If you have a single Draggable element, then the default animation associated with DragOverlay works fine. If you have multiple Draggable elements then the animation associated with DragOverlay is broken. It looks like it never resets to the original opacity. Not sure why.

https://codesandbox.io/s/intelligent-lake-uyimh?file=/src/App.js

Looks like these lines don't run

dnd-kit/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts

Lines 104 to 106 in ae212fe

	if (finalNode) {
	finalNode.style.opacity = originalOpacity;
	}

Anyway around this?

I mean you can get around this by setting the dropAnimation={null} in the DragOverlay (although that's not desired for my use-case).

[clauderic]

Hey @sscaff1, currently the <DragOverlay> component assumes that there are no more than one defined per <DndContext> provider. Try lifting the state up outside of your draggable components.

https://codesandbox.io/s/focused-thompson-5cxqv?file=/src/App.js

Having more than a single <DragOverlay> component may be something that is supported in the future, but no immediate plans around this as use-cases seem limited.

I'm not familiar with the specifics of what the use-case you're building are, but my general advice would be that rendering the <DragOverlay> component within the same component where you use useDraggable is not a good idea.

The rationale being that if your draggable component is reparented, the drop animation will not work since your draggable component will unmount and re-mount (which will also cause the <DragOverlay> component to unmount and re-mount). Further, if your draggable component is unmounted while dragging, for example, if it is reparented onDragOver, the <DragOverlay> component will also unmount and re-mount, which could lead to unexpected results.

[sscaff1]

Thanks for explaining this. I want to render a different element depending in the DragOverlay on the type of the draggable. I'm guessing; however, I can just use over and active to do that.

[clauderic]

Gotcha. That's a fair use-case.

For the time being, you'd need knowledge of what type of overlay the associated active draggable id is associated to. For now, you could do something like this: https://codesandbox.io/s/affectionate-carson-b9jif

In future versions of @dnd-kit, it will be possible to add metadata for your draggable elements to make this easier.