Dropping a link follows it in Firefox.

[galenhuntington]

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

[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".

[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 #221 which was fixed a long time ago.

[delian1986]

Another workaround is to set manually draggable=false to img element
<div ref={drag}> <img src={imgSrc} alt="" draggable="false" /> </div>

It seems to work, but its bad...

[istateside]

I think this is happening because the isDraggingNativeItem function in HTML5BackendImpl only returns true if the drag source defines its item type as a native drag.

If you mark an element as a drag source with useDrag, you define its drag type. However, if an element inside of that drag source could trigger a native drag event (like an <img> or <a> node), the browser will attach native HTML5 drag types to the e.dataTransfer object.

All of the drag handling in the HTML5 backend treats custom drags and native drags as exclusive things, but in firefox, you could have a custom drag event firing that still has native drag data in the dataTransfer - the drop event there will act like a native drop in those cases.

I've put up a PR that fixes the bug in Firefox for me, but I haven't tested it extensively with generic use cases.

[huksley]

Hi, I am experiencing the same problem and I don't see an improvement after upgrading to v14.0.3

I have ... as a drop object, with custom { accept: "Contact" } and I use HTML5 backend
On drag and drop, FF performs navigation to this "#" link.

Is there any way to fix this?

False alarm, works fine after upgrading also react-dnd-html5-backend to 14.0.1