Can't cancel dragging after it started

[goliney]

I find it impossible to cancel the dragging event. If you change your mind while still holding the mouse button pressed, you can't go back. The item will be dropped anyway.

I tried ESC button, or dragging the item away from the tree container. But the onMove is still fired.

Jul-26-2024.10-56-40.mp4

Expected result:

onMove is not fired if ESC is pressed during the drag or if the item is dropped outside the tree area.

[ben-hearn-sb]

I think it does do it when you press escape. It is not very fast though to show you it is cancelled and in the controlled component I am pretty sure you need to implement this yourself (still need to get down to this and implement it though)

// Ben

[goliney]

The gmail demo has an uncontrolled state and Esc doesn't cancel the drag but releases it. The item appears in the new position immediately after pressing Esc.

I'm using a controlled component in my project. I can watch for Esc but don't know how to cancel the drag. @ben-hearn-sb do you have any suggestions?

[ben-hearn-sb]

My project also does the same when I press escape. Is there a flag in the tree for isDragging? If so, perhaps this flag could be set to false when Esc is pressed?

This project seems to cancel the drag operation

https://codesandbox.io/p/sandbox/angry-turing-lljvq9?file=%2Fsrc%2Fcomponents%2FNode.js%3A14%2C23

[goliney]

@ben-hearn-sb I looked at the project you provided, but unfortunately it has the same problem. The onMove callback is an empty function, but it is still fired when you press Esc amid dragging.

[ben-hearn-sb]

Ah yes, I see you are correct... the API for the node itself has a key event, is it possible to capture the event in the node itself and set isDragging to false or some such?