Drag issue when dragging *new* item onto a tree.

[nicksrandall]

I'm running into an issue that has been a challenge to debug. Basically, the drop target isn't being detected until the mouse moves off the window and then back onto the window.

We are using a the "tree" component and when reordering items in the tree everything works. However, we also want to support dragging a new item (from outside the tree but still in same window) into the tree and creating it. In that case, the drop targets are only found when the user moves cursor off the window and back on. Very strange.

Drag.issue.mov

System Info:

  System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 204.63 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 124.0.6367.61
    Safari: 17.5

[nicksrandall]

Also using latest version of npm packages if that helps.

[nicksrandall]

The above issue is experienced when using latest Chrome browser.

There are no issues when using latest Safari

There is a similar issue on latest Firefox but it seems to not even pick up that a drag has started because no preview component is ever rendered and no drag events are fired. Dragging from within the tree does work as expected.

[nicksrandall]

Switching the draggable element from a button to a div has weirdly enabled firefox to work as expected in all cases. That change has had no effect on Chrome.

[alexreardon]

This seems very strange indeed! We have not come across this type issue before. It's hard to know what could be going on without a standalone example. Would you be able to provide a stripped down version as a codesandbox (or similiar) so that we can take a look and help troubleshoot your issue?

[nicksrandall]

I'll see if I can get a reproduction put together.

I've narrowed down the issue to the draggable being absolutely positioned over an iframe. If I remove the iframe or move the draggable so that it is not on top of the iframe it works as expected.

[nicksrandall]

What I ended up doing to temporarily fix this issue is attaching a pointerDown event to the draggable that temporarily sets pointer-events: none on the iframe and then when the drag is finished, we remove that style.

It seems that the issue is that the iframe was stealing some drag events that was preventing pragmatic-dnd from doing its thing.

[mech]

I encounter this before but it is my misunderstanding when doing the droppable container. I only have a single droppable container, if I change to all individual item to also encapsulate the draggable, then it was resolved.