Library kills other Drag / Drop behavior

[jameskerr]

It's reported that this happens. I am also aware that there can only be one instance of html5 backend on the page at once.

[Arthur-Ruthenberg]

It's reported that this happens. I am also aware that there can only be one instance of html5 backend on the page at once.

I found out that in one of the latest updates the HTML5Backend dependance that they use here it is possible to pass a root element that will allow 'localization' of this behavior only to the chosen component.

Hopefully someone can fix it.

[jameskerr]

@Arthur-Ruthenberg thanks for the comment. Because I don't feel like I fully caught your message, let me ask: are you having this problem in your app with react-arborist? Or are you helping suggest a solution for how we might fix this?

[Arthur-Ruthenberg]

@jameskerr
Both.
I was trying to implement a simple dragging of an element in my project (I also have implemented the react-arborist there) and I stumbled upon this problem. The native onDrag event is being blocked by react-dnd-HTML5Backend library.
This library puts an event listener on the window.onDragStart which blocks any subsequent onDrag events.

I dug a little further within the react-dnd-HTML5Backend and they said there that sometime during the 2021 they made an improvement to the library to allow passing of a 'root' object to the dnd provider and it is supposed to fix this bug.

[jameskerr]

Thank you for the research. Now I understand the issue. I do know of the "root" option you are referring to. If you are in a hurry, I'd welcome a contribution to react-arborist that adds a "dndRoot" option to the props and passes it to the react-dnd provider. Otherwise, I'll work on this as I have time. Thanks for your help!

[jameskerr]

This is an issue with reactDnd: react-dnd/react-dnd#3344 This is unfortunate.

I will add a prop to the Tree component called dndRootElement so that you can scope the drag listeners to whatever element you want. If none is specified, it will default to window.

[jameskerr]

@Arthur-Ruthenberg in the latest release (version 1.1.0) you can pass a dndRootElement prop to the tree to scope the event listeners. Let me know if that works for you!

[Arthur-Ruthenberg]

@jameskerr Thank you!
I will check it out ASAP!
I actually wanted to do it myself next weekend, but you beat me to it

[downright-development]

dndRootElement={document.getElementById('arborist-tree-wrapper')}

Whoa! This should be MUCH more advertised as a "gotcha" to watch out for. This single line solved a 1.5 day bug I was fighting. Thanks for a great library!