Using react-arborist in an app seems to break file & folder drop on <input type="file" multiple /> elements

[johnw3d]

trafficstars

I just recently added react-arborist to a React 18.2 app and have discovered it seems to break file and folder dropping on an <input type="file" multiple />, at least, it prevents onchange events from being delivered to the input onchange handler.

With a single, simple <Tree /> in the app, none of the file <input /> drop targets see onchanged events, and it appears something is eating the event, as a regular drop onto a page other than an input element opens the file in another browser tab.

If I comment out the <Tree />, the drop targets all accept file & folder drops again.

I've tried running <Tree /> with all of disableEdit disableDrag disableDrop in place, but it still breaks input.

Any suggestions?

[seancheno]

Somewhat similar issue I am facing. Rendering the tree component is preventing this event -> document.addEventListener('dragend', handleDragEndGlobal) from no longer being called.

[seancheno]

Not sure if this will fix your issue, but it fixed my above issue - see - this issue

Specifically in my case, using the tree's parent as the element to pass as the root element for the dndRootElement prop

<div ref={treeContainerRef} className="relative flex h-full min-h-0 flex-col " > {treeContainerRef.current && ( <Tree dndRootElement={treeContainerRef.current} ref={treeRef} data={treeData} // etc. > {HierarchyPanelTreeNode} </Tree> )} </div>