Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't cancel dragging after it started #260

Open
goliney opened this issue Jul 26, 2024 · 8 comments
Open

Can't cancel dragging after it started #260

goliney opened this issue Jul 26, 2024 · 8 comments

Comments

@goliney
Copy link

goliney commented Jul 26, 2024

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
Copy link

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
Copy link
Author

goliney commented Jul 29, 2024

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
Copy link

ben-hearn-sb commented Jul 30, 2024

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
Copy link
Author

goliney commented Jul 30, 2024

@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
Copy link

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
Copy link

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

@goliney
Copy link
Author

goliney commented Nov 13, 2024

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants