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?

[ben-hearn-sb]

@goliney did you get anywhere with this in the end? Im back on this issue now

[goliney]

@ben-hearn-sb I didn't get anywhere with it, I just accepted it :) I show a confirmation modal on an attempt to move a node, so it gives a level of protection against unexpected changes.

[ben-hearn-sb]

Ah snap... its a very expected feature for a treeview. Im going to try and experiment with event handlers and see where I get. In the meantime if anyone comes lookin at this and has an answer please drop in and comment :)

[ben-hearn-sb]

@goliney I think I found it!

If you look at the files in src/dnd/...

Take a look at "drag-hook" and "drop-hook".

In "drag-hook" you can see the "end" property has a bunch of logic in it that handles a node after a drag has finished, problem is when you end a drag regardless of how (in our case pressing escape) it always fires. If you cut this logic out and put it in the "drop" property of drop-hook the behaviour is as you expect.

We just need @jameskerr to confirm that nothing weird would happen if we cut the "end" logic out and put it in "drop".