804036 - dragenter event is fired twice when the dropzone is parent of draggable or draggable itself with Firebug

Status: NEW

(Core :: DOM: Copy & Paste and Drag & Drop, defect)

Description

[danya.postfactum]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.92 Safari/537.4

Steps to reproduce:

Create draggable element and listen ondragenter event of it or its parent. Start to drag the element. 

<a ondragenter="console.log(event.type)" draggable ondragstart="event.dataTransfer.setData('Text', 'test'); return true" href="#">Draggable</a>


Actual results:

dragenter event is fired twice on start dragging. If we move the element out of dropzone, dragleave event will be fired once only, though.


Expected results:

dragenter event should be fired only once

Comment 1

[Loic]

Could you attach a testcase, please.

Comment 2

[danya.postfactum]

Attachment: This demonstrates firefox dragenter twofold event bug

Comment 3

[danya.postfactum]

Comment on attachment 674965 [details]
This demonstrates firefox dragenter twofold event bug

Grab the first square blue border and drop (or move away from) it on body. You get:

dragenter BODY
dragenter BODY
dragleave BODY

instead of

dragenter BODY
dragleave BODY


So, we have entered twice into the river :)

Try to grab the first square (red area) and drop it on body. You get:

dragenter A
dragenter A
dragenter BODY
dragleave A
dragleave BODY

instead of 

dragenter A
dragenter BODY
dragleave A
dragleave BODY

It is interesting, that if the draggable has TextNode, we get:
dragenter A
dragenter #text
dragenter A
dragleave #text
dragenter BODY
dragleave A
dragleave BODY

but if we have a Span instead of TextNode, we get:
dragenter SPAN
dragenter SPAN
dragenter A
dragleave SPAN
dragenter BODY
dragleave A
dragleave BODY

Comment 4

[Loic]

What I see in the webconsole with your testcase (FF16 on Win 7):

1) 1st blude border:
dragenter BODY 
dragleave BODY

2) 1st red square:
dragenter A
dragenter BODY
dragleave A
dragleave BODY

3) Text of 2nd square:
dragenter A
dragenter #text
dragenter A
dragleave #text
dragenter BODY
dragleave A
dragleave BODY

4) Yellow square:
dragenter SPAN
dragenter A
dragleave SPAN
dragenter BODY
dragleave A
dragleave BODY

Could you try with a new profile, please.
https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles

Comment 5

[danya.postfactum]

Excuse me. This bug is caused by FireBug...
I have disabled FireBug and this issue has dissapeared.

Comment 6

[Loic]

Thanks for the report.

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Reported in Firebug issue list:
http://code.google.com/p/fbug/issues/detail?id=6034

Honza

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I have been testing this with a new fresh Firefox profile (no Firebug installed) and here is what I see in Web Console:

1) 1st blude border:
dragenter BODY   2x
dragleave BODY

2) 1st red square:
dragenter A      2x
dragenter BODY 
dragleave A
dragleave BODY

-> Note that Web console groups logs so, you need to check the red number at the right side of a message to see that it's been logged more than once.


To, me it looks like 'dragenter' is called twice even if Firebug is not installed.

Could anyone yet verify?

Honza

Comment 10

[Loic]

(In reply to Jan Honza Odvarko from comment #9)
> To, me it looks like 'dragenter' is called twice even if Firebug is not
> installed.
> 
> Could anyone yet verify?

Indeed, "dragenter A" and "dragenter SPAN" are logged twice (tested with FF19).

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Loic from comment #10)
> Indeed, "dragenter A" and "dragenter SPAN" are logged twice (tested with
> FF19).
Thanks for the update!

So, I am reopening this report.

Honza

Comment 12

[Matthew Prestifilippo]

Attachment: moving dragenter

Multiple dragenters are invoked when the dragenter element is moving.  See the attachement.

Since this was a similar issue, I added it to this ticket rather than opening a new one.

Comment 13

[Abe - QA (:Abe_LV)]

User Agent 	Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Version 	46.0a1
Build ID 	20160112030207
Channel 	nightly

Thank you for taking time to report this.
Are you still able to reproduce this in the latest version ?  I cannot reproduce this.

Comment 14

[Abe - QA (:Abe_LV)]

It is not reproducible. Closing this as works for me.
Feel free to reopen this bug if it still reproduces in the latest versions. Thanks

Comment 15

[Glenn Jorde]

I can reproduce the attached testcase in:

Version: 47.0a2
Build ID: 20160314004022
Update Channel: aurora
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

And I have run into this in an app I'm developing right now. Have to find a good workaround.

Comment 16

[Glenn Jorde]

I forgot to mention that in the app I'm building I do not use the draggable attribute. I'm dragging files from desktop onto the element with the dragenter handler. But still the same issue I guess.

Comment 17

[mibus32]

Yes, the event firing twice when you drag file from the Finder, straight into the window. 


P.S. I think Firefox should be removed from the internet. So much of so stupid bugs, that take hours to hack around, man...

Comment 18

[Abe - QA (:Abe_LV)]

Attachment: Drag and drop.PNG

Reopening this bug as I can reproduce the issue in Firefox release version.
However, I could not reproduce this in nightly channel.
The 'dragenter' is logged twice in release version When the first blue border is dragged. See attachment. 

I tested this using the following environments:
Update Channel 	nightly
Version 	48.0a1
Build ID 	20160328030215
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:48.0) Gecko/20100101 Firefox/48.0

and

Update Channel 	release
Version 	45.0.1
Build ID 	20160315153207
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0

It is also reproducible in win-7.

Comment 19

[Loic]

(In reply to Abe - QA from comment #18)
> Reopening this bug as I can reproduce the issue in Firefox release version.
> However, I could not reproduce this in nightly channel.

Because you enabled e10s, it seems to be fixed with e10s, but it's still broken in non-e10s mode.

Comment 20

[Loic]

[e-mail], can you test Nightly to confirm it works as intended with e10s enabled (you can enable/disable e10s in about:preferences#general > Enable multi-process Nightly): https://nightly.mozilla.org/

Comment 21

[Abe - QA (:Abe_LV)]

Yes, it is fixed with e10s but broken without e10s. Thanks Loic.

Comment 22

[BugBot [:suhaib / :marco]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.

Comment 23

[Tomasz Kaźmierczak]

Hi all,

I'm implementing drag-and-drop functionality for my webpage and I've encountered the same issue.

First some formalities:

• Firefox 138.0 (but it was the same in previous versions also)
• using the original example from this attachment: https://bug804036.bmoattachments.org/attachment.cgi?id=674965
• in previous comments people mentioned something called e10s, which supposedly, when added to Firefox, causes that this bug is no more; don't know what this e10s is and I doubt I have it installed (but I might be wrong).

I've spent a considerable amount of time trying to debug this, mostly because I needed to find a workaround (in my use case of drag-and-drop this bug has a real impact on functionality).

My findings are listed below (all are true for both my web page and for the example code from the aforementioned attachment):

1. when you first load the page, everything works fine - the event is fired only once when you start the drag operation

2. you need to first perform a valid drop before you can observe the bug during the next drag operation:

• canceling the drag operation (for example, pressing ESC key) will prevent the bug from occurring
• dropping the dragged element outside of any draggable element will also prevent the bug from occurring
• dropping the element on itself will also prevent the bug from occurring

In the attached example, it is enough to drop the first rectangle on any of the other two rectangles. Then you just start another drag operation of the first rectangle and you can observe the bug.

3. Keep in mind that when the bug occurs, you will see only one dragenter message in the JavaScript console, but with the blue label saying "2" on the right hand side (meaning that there were 2 messages, only just the duplicate was suppressed by the console).

4. The first of the two events, and this is quite important I think when you want to investigate the source of the bug, will have all of the pointer coordinates (clientX/Y, layerX/Y, pageX/Y, screenX/Y, x/y) from the last drop event.

5. Even when you reload the page after the first drag and drop (by clicking the reload button next to the address bar, or by pressing F5), the bug still occurs (even the event's pointer coords are the same as in the drop event from before the page reload!).

Hint 1: extend the example code by adding the event's pointer coords to the debug message, and the console will not suppress the second message (the messages will differ because of different coordinates).

Hint 2: extend the example code by logging also the drop event, along with its coords - this way you can confirm my observation described in point 4) above.