Dropping a link follows it in Firefox.

Describe the bug

I have an <a href=""> link element which I want to make also draggable. I had wrapped the link in a <span ref={drag}> to be sure. Previously this was fine; clicking it works as a link, but it also instead can be dragged. However, after upgrading react-dnd-html5-backend to the latest 14.0.0, this no longer works; as soon as it is dropped over a qualified element, the link is immediately followed. Dropping it elsewhere does not cause this. I only see the wrong behavior in Firefox, not Chrome.

I have traced it back to #2949. If I restore the e.preventDefault() in handleTopDropCapture, it works correctly. I don’t understand the code well enough to diagnose further. Maybe somehow that isDraggingNativeItem has browser differences.

Possibly related, but even the simple example here https://react-dnd.github.io/react-dnd/examples/dustbin/single-target does not work right for me in Firefox. When I drag into the box, the alert appears twice, whereas in Chrome it appears once. Furthermore, after the second alert, I get an “invariant violation” error in the console. This might not be the same problem, however.

Desktop (please complete the following information):

• OS: Ubuntu Linux
• Browser Firefox 87.0

[jgonera]

This looks like a regression. I didn’t have this problem on 11.x but it started happening after updating react-dnd to 14.0.2.

Seems similar to https://github.com/react-dnd/react-dnd/issues/221 which was fixed a long time ago.

[galenhuntington]

Adding .preventDefault() to the drop target’s onDrop as described in #3188 allowed me to work around this problem. I don’t know if that means it should be considered “fixed”.