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

Dropzone indicator doesn't disappear when dragging files or HTML from outside the window and pressing Escape #26013

Open
talldan opened this issue Oct 12, 2020 · 4 comments
Assignees
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Comments

@talldan
Copy link
Contributor

talldan commented Oct 12, 2020

The blue dropzone indicator doesn't disappear when dragging files or HTML from outside the window and pressing Escape

#25986 adds handling for cancelled drag events using the dragend event. Unfortunately dragend only fires when the source of the drag originates from inside the document, which mostly affects files since they're dragged from outside the document (in most cases I can think of).

keyup also can't be used as the window isn't actively focused when dragging from outside, so keyup doesn't fire.

Potentially dragleave is an option, though this seems a little complicated to implement.

To reproduce
Files

  1. Drag a file into the editor canvas from finder or windows explorer
  2. Drop indicators should be displayed
  3. Press escape
  4. Observe the blue drop indicator is still displayed

HTML

  1. Drag HTML into the editor canvas from another browser window (usually the easiest way to do this is to drag a link from one window into another).
  2. Drop indicators should be displayed
  3. Press escape
  4. Observe the blue drop indicator is still displayed

Expected behavior
The drag event should be cancelled and the drop indicators shouldn't be displayed.

@talldan talldan added [Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Bug An existing feature does not function as intended labels Oct 12, 2020
@gwwar
Copy link
Contributor

gwwar commented Mar 11, 2021

I'm still seeing this one in Gutenberg 10.2

Here's a video example, using an image dropzone for emphasis. To reproduce drag an image without releasing, then press esc

esc.mp4

@ellatrix ellatrix self-assigned this May 21, 2021
@Mamaduka
Copy link
Member

I'm no longer able to reproduce this issue. Not sure if it was fixed with recent Dropzone rewrite - #30310.

@mirka mirka added the [Package] Components /packages/components label Sep 12, 2022
@kevin940726
Copy link
Member

I can't reproduce this either and I believe it's fixed in #30310. It looks like the dragend event won't be dispatched if we're dragging from outside the current window. However, it will dispatch a dragleave event on the drop zone, which we can use to indicate that the dragging is finished. This only accidentally fixed the issue though because we won't fire onDragEnd in useDropZone in that case, not until the user moves the mouse and triggers the mousemove event.

@Mamaduka
Copy link
Member

@kevin940726, can we close this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

6 participants