Delay after mouse is released when drag source is unsuccessfully dropped

Describe the bug I’m unable to detect when the user’s mouse is released when the dragged item is dropped outside of a drop target.

The end event for the drag source does not fire until the native “slide back into place” has completed (but I do not want to use the native one).

My goal is to reposition the dragging element myself using transform: translate(x,y) and then have it animate back when dropped somewhere that isn’t a target.

Reproduction

Live Reproduction

This codesandbox example from the docs shows this behavior in action for the custom drag layer.

Steps to reproduce the behavior:

1. Select a draggable item in that sandbox
2. Drag it outside of the box
3. Release it
4. Observe a ~1s delay before it snaps back to place

Expected behavior The end event of the Drag source should fire when the unsuccessful drag is complete (mouse released).

If this is not the intent of the end event, then another hook would be useful.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Mac]
• Browser [e.g. chrome]
• Version [e.g. Version 89.0.4389.72 (Official Build) (x86_64)]

Additional context If this is a bug or lack of functionality of the browser, are there any workarounds?

[salali]

The only way I’ve found to get rid of the delay is using the touch backend.

<DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>

[YiyuanYin]

I’ve encountered with the same problem when I use the drag preview of my own by using the code below.

  useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

After trying different ways of dragging, I found that the delay won’t disappear unless you are dragging items over a droppable wrapper, that means that you must wrap anywhere you can drag with

  const [, drop] = useDrop(() => ({ accept: 'file' }));

<div ref={drop} style={{ height: '100%' }}>
{element}
</div>

That is the only way I can figure out to solve this problem.