656164 - dragleave/dragexit not fired when dragging leaves the window

Status: NEW

(Core :: DOM: Events, defect, P5)

Description

[snickell+buzilla]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: 

I'm not getting dragleave (or dragexit) events when a drag (started within my page) leaves the window.

Reproducible: Always

Comment 1

[snickell+buzilla]

On Chrome and Safari I get dragleave events when a drag leaves the window.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

Can you attach a simple Testcase showing the Issue?
https://bugzilla.mozilla.org/attachment.cgi?bugid=656164&action=enter
Did it work in older Firefox Versions, i.e. is this a Regression?

Comment 3

[james]

Yes, it worked on 3.6, but i've just upgraded to 4.0.1 and both of these events fail to fire

Comment 4

[snickell+buzilla]

Attachment: Test case demonstrating the bug in FF4 (works in 3.6)

Comment 5

[snickell+buzilla]

Just tested in 3.6, works properly, this is a regression.

Comment 6

[(mostly gone) XtC4UaLL [:xtc4uall]]

Hmm, on WinXP I get 0: enter  1: enter  2: enter  3: leave  4: enter  5: leave  with 4.0.1 & Trunk. OS specific?

Comment 7

[(mostly gone) XtC4UaLL [:xtc4uall]]

Oh, with 3.6. it's 
0: enter  1: enter  2: leave  3: enter  4: leave  5: enter  6: leave

Comment 8

[snickell+buzilla]

On 4.0.1 on OS/X I get:

0: enter  1: enter  2: enter  3: leave  4: enter  5: leave

The #5 leave event isn't about leaving the window, but some child element generating event bubbling in the first 1/4 of the drag. I never get an event related to dragging out of the window.

Comment 9

[james]

I've just updated to firefox 5 and notice that this is still an issue. Any update on when it will be fixed?

Comment 10

[Steven Michaud [:smichaud] (Retired)]

See also bug 665704.

Comment 11

[Andrew Jacobs]

I can still repro this bug on Windows 7 + Firefox 7.0.1.  Dragexit and dragleave are never triggered on the window, document, or fullscreen DOM element.

In other browsers a dragleave is triggered on the document and the fullscreen DOM element.

http://jsfiddle.net/q4Wpg/ demonstrates the bug quite well.  If you open explorer or finder and slightly obscure the large "DRAG" div you can drag a file over the div and observe the div turn red.  If you leave the element via the scroll bar or any of the white regions near it the div will return to green.  If, however, you exit the element directly onto the explorer/finder dialog it will not return to green.

Comment 12

[Rudie Dirkx]

The jsfiddle is working for me in Firefox 8.0 on Windows 7 and in Chrome 16.

I am experiencing the same problem though: a 'fullscreen' element with a dragleave event.

I think that's the problem: the only time you leave the element, you also leave the document and window. Firefox might only trigger an event like this when it hovers over another element (which it doesn't if the element is 100% by 100% of the document).

It's definitely a bug and definitely reproduceable. I've updated the jsfiddle: http://jsfiddle.net/rudiedirkx/DtNzd/show/

Comment 13

[bjornson]

This is a four-year-old bug that's still listed as unconfirmed. There are a few highly voted questions regarding workarounds on SO (such as http://stackoverflow.com/questions/10253663). Any chance this (or the duplicate 665704) will get some traction soon?

Comment 15

[Kohei Yoshino [:kohei]]

This annoys me as well. The setTimeout hack is not ideal at all.

Comment 16

[Kohei Yoshino [:kohei]]

This affects GitHub as well. https://github.com/blog/2105-upload-files-to-your-repositories

Comment 17

[Tommy]

It seems the bug is also reproducible in FF 49.0.2, when it wasn't the case in FF 47
Initially reported here https://github.com/okonet/react-dropzone/issues/265 with the example on this page http://okonet.ru/react-dropzone/

Comment 18

[u587334]

Using FF 50.1.0 this bug is reproducible. http://codepen.io/bryc/pen/GNEJrQ is an example demonstrating the File and DragDrop API, with a visual effect relying on the dragleave event. In Firefox the dragleave event isn't fired when leaving the window. However it appears to fire properly if moving the mouse fast enough.

Comment 19

[georgevs]

I stumbled upon the same issue recently with Firefox 53.0.3 on Windows. Interestingly enough this issue is NOT observable with the same version on macOS*.

Here is a small example of the issue https://jsfiddle.net/Georgevs/9qu263z4/. When dragging files in and out the drop target the `dragleave` is often not fired if the mouse leaves the browser window straight. The `dragleave` is fired always if the mouse leaves the drop target but stays on the same document window.

We caught the issue through [react-dropzone|https://github.com/okonet/react-dropzone] where a bug was filed for their own callback not being fired. 


*the issue is still observable on macOS but only if the mouse leaves the document window and enters the Development tools.

Comment 20

[georgevs]

Correction: the link for the example is https://jsfiddle.net/Georgevs/qas495cz/

Comment 21

[u587334]

As of Firefox 57.0.2, dragleave event appears to fire properly when leaving window.
The target always equals HTMLDocument (window.document). Does that mean this bug is fixed?

Positive test case: https://output.jsbin.com/puvidamahi
Dragging file in and out of window should trigger the dragleave fade-out effect.

In any case, behavior is now different than it was in my first comment (Firefox 50.1.0).

Comment 22

[u587334]

Positive test case in previous comment expired, so use this instead: https://output.jsbin.com/pifopo/quiet