Gutenberg: Drag and drop stuck mid-drag

[braders]

Issue Overview

I attempted to re-order my blocks with the recent drag and drop feature. However, mid-drag the drag was "released". The system still thinks it is mid-drag (body has the is-draggable-components-draggable class), but the dragged component is no longer moving with my cursor. I am still able to interact with the blocks that I was not dragging, and with the adminbar/ navigation etc.

However, moving my mouse and/ or clicking does not move the dragged block back into position - it is stuck over the rest of the content.

Attempting to drag another block seems to "pick-up" both blocks, but the block that got stuck is never insterted back into its correct flow:

(Notice the original list that has got stuck behind the paragraph that I am moving)

Steps to Reproduce (for bugs)

I am not able to reliably reproduce this, but the issue occured at the same time that I received a browser notification (gmail). I suspect that the window focus was briefly transfered to the OS or Browser notification widget.

Firefox Developer Edition, Windows 10.

[karmatosed]

Unfortunately I was unable to replicate this. Is there anything else you can think of to provide as information to help us recreate?

[braders]

I have again been able to replicate this issue by triggering a Gmail browser notification whilst moving the blocks in Firefox developer edition (Firefox 60).

I would assume any notification would cause this issue (https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)

[kpu23]

I've ran into this same problem multiple times but unfortunately I cannot reliably reproduce it.

[kpu23]

Okay I can reliably reproduce it when I have a Twitter embed (it probably has the same behavior for all embeds).

1. Create a new post
2. Add a header block
3. Add a twitter embed
4. Add a second header block

The page looks like this:

1. Move the second header block above the first

The header block gets "stuck" like this:

[ellatrix]

I can reproduce this as well, see #7081.

[nosolosw]

I've been testing this. I can only repro _sometimes_, and it seems to happen more often when I drop content before/after an embed block, or drag/drop the embed block itself. Couldn't repro with notifications (tried with google calendar ones, but I assume any other will do). When I can repro, the dragend event isn't fired.

Two potential paths to fix this are: 1) use a different "end" event (I'm testing with drop instead of dragend which seems to be more reliable) and 2) find out why dragend isn't always fired. I'll work on fixing this.

[nosolosw]

I think I've found the root cause: it's a confirmed chrome bug. The dragend event is not fired (sometimes) when an iframe is involved in a DOM operation - for example, the iframe is added/moved/removed, is made visible/hidden, etc. I couldn't reproduce in other browsers.

I have some ideas that may fix this besides what I mentioned in the above comment. @braders @kpu23 @iseulde Could I ask you to confirm that this happens to you only in chrome? That would be helpful in fixing the bug. These are the instructions that worked for me to reproduce it:

• create a post that contains some embed block like YouTube video (embeds use iframes).
• drag the embed block to a different position. If it works the first time, try again. The second one never works for me.

[nosolosw]

FWIW, Gecko/Firefox doesn't fire dragevent either if the node being dragged is moved/removed during the drag operation. This shouldn't be an issue for us because of how we work with nodes, and I couldn't reproduce in Firefox. Thought it'd be worth mentioning nevertheless.

[kpu23]

Hi @nosolosw,

I've tested every browser I have. Here are the results.

Chrome v68.0.3440.106

The same issue occurs.

FireFox v61.0.2

This bug does not happen for me in FireFox but there is something worth reporting. Following the same scenario I outlined above, the Twitter embed block lost its "structure" after moving the 2nd header block.

Before:

After:

Internet Explorer v11.something
Dragging doesn't work. Please don't waste time looking into this one though 😉

[nosolosw]

Potential fix at https://github.com/WordPress/gutenberg/pull/9511

[nosolosw]

@kpu23 note that the embed behavior you mention also happens when using the up/down mover so it's unrelated to this and may merit its own separate issue.

[kpu23]

Agreed. It is definitely not a part of this issue/ticket. Shall I create a new ticket for it? (Of course I'd check to make sure a ticket doesn't already exist first).

I appreciate all of your work for Gutenberg!

[nosolosw]

https://github.com/WordPress/gutenberg/pull/9511 fixes this and will be out on the 3.9 version.