search

atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
7.45k stars 133 forks source link

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

Open nicksrandall opened 4 weeks ago

nicksrandall commented 4 weeks ago

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.

https://github.com/atlassian/pragmatic-drag-and-drop/assets/1800460/67b05466-3083-478b-9cf2-9328a6585348

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 commented 4 weeks ago

Also using latest version of npm packages if that helps.

nicksrandall commented 4 weeks ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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 commented 3 weeks ago

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.