1754285 - Mouseleave event does not fire after dragging an element (using Angular Material Drag & Drop)

Status: UNCONFIRMED

(Core :: DOM: Events, defect)

Description

[t.moshon]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Steps to reproduce:

I've implemented small example using Angular Material Drag & Drop. Here's the link - https://stackblitz.com/edit/angular-ivy-sj4wlp.

Steps to reproduce:

1. hover cursor on one of the rectangles
2. start dragging
3. see that there's no onMouseLeave message in the console after onDragStarted msg.

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Actual results:

Mouseleave event did not fire after (cdkDragStarted).

Expected results:

Mouseleave event should have fired after (cdkDragStarted) like in Chrome, Edge.

Comment 1

[t.moshon]

(In reply to t.moshon from comment #0)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Steps to reproduce:

I've implemented small example using Angular Material Drag & Drop. Here's the link - https://stackblitz.com/edit/drag-drop-example or https://drag-drop-example.stackblitz.io/.

Steps to reproduce:

1. hover cursor on one of the rectangles
2. start dragging
3. see that there's no onMouseLeave message in the console after onDragStarted msg.

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Actual results:

Mouseleave event did not fire after (cdkDragStarted).

Expected results:

Mouseleave event should have fired after (cdkDragStarted) like in Chrome, Edge.

Comment 2

[t.moshon]

I thought I was editing bug description, not adding comment with it. Alright, just wanted to give another link to example - https://drag-drop-example.stackblitz.io.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Events' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 4

[Hsin-Yi Tsai (she/her) | away [:hsinyi]]

Masayuki, can you please confirm what the behavior should be per spec? I was trying to read the spec but I feel it's not super clearly defined. Thank you.

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Yeah, I think that it's not defined that the relation between DnD API and UI Events.

On the other hand, with this simplest testcase using draggable=true, I don't see mouseleave event on Chrome.
https://jsfiddle.net/d_toybox/pd5k2xLq/
So I guess that inserting the element to show the draggable item would cause the mouseleave on Chrome, but I don't know why it's not dispatched on Gecko.

Smaug, do you have any ideas?

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

A minimal testcase would be really useful here - something not using any external libraries.
If the testcase in comment 2 adds a new element, it might be that we don't flush the layout before processing some event and then don't get mouseout for the previous element which was hovered.