search

brimdata / react-arborist

The complete tree view component for React
MIT License
3.05k stars 139 forks source link

Can't cancel dragging after it started #260

Open goliney opened 3 months ago

goliney commented 3 months ago

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.

https://github.com/user-attachments/assets/8334116e-a838-421e-8a82-e859baeeb2cc

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

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

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

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

@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 commented 3 months ago

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

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

goliney commented 3 days ago

@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 commented 3 days ago

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 :)