1759593 - Event bubbling behaves inconsistent to Chrome and Safari, Creates Multiple Tabs when Control Clicking

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect, P1)

Description

[f.xrave]

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

Steps to reproduce:

1. Go to https://holodex.net/
   2a. Try using control click on a Video's Title section.
   2b. Try using control click on a channel name inside any Video Card.

Actual results:

2a: observe that 2 tabs were opened of the video.

2b: observe that 3 tabs were opened of that channel.

Tested on Firefox 98.
(Users report they also observed this behavior on Firefox 99, and 100)

Expected results:

2a: one tab opens of the video.

2b: one tab opens of the channel.

(Note: Chrome and Safari exhibits this correct behavior, users report that Firefox 97 also behaves correctly.)

Comment 1

[f.xrave]

One of our users looked into it and hypothesized:

i think it's clicking through every layer, so clicking the title counts as 2 clicks (as the thumbnail card href expands over the title) and clicking a channel counts as 3 clicks (as the name href expands over that too)

Links to videos showing this behavior:
https://cdn.discordapp.com/attachments/801759432450375700/953019387412099092/Holodex_Mozilla_Firefox_2022-03-14_19-57-29.mp4
https://files.catbox.moe/s8fe0g.mov

Comment 2

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

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Alin Ilea, Desktop QA]

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

Hi,

I am able to reproduce the issue in release 98, beta 99 and latest nightly 100.0a1 (2022-03-15) using Windows 10. The issue is not reproducible in Chrome.
This is not reproducible in Fx97. Regression range below:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=cc74f768d0ebf63b4a5a1ba94d22e75a6d0c7550&tochange=0d863192031a0e3125deaf5649d55fed7fca6bbc

Thanks for the report and for all the details.

Comment 4

[:Gijs (he/him)]

What does "event bubbling" mean in the summary (ie how does it relate to what you see in the site?), and is there any chance you have a more minimal testcase? The minified JS in this site makes it pretty hard to see what's going on - but at a glance, it seems the site handles the ctrl-click and then doesn't set event.defaultPrevented by calling event.preventDefault(). I'm not sure why this would work differently in Chrome, but it wouldn't be all that surprising if they had some browser detection in there or something...

Comment 5

[f.xrave]

I've reproduced it:

https://codesandbox.io/s/compassionate-paper-s23eol?file=/src/components/HelloWorld.vue

<template>
  <a class="hello" href="https://google.com">
    <a href="https://google.com">CTRL-CLICK ME</a>
  </a>
</template>

i mean it's literally this in a Vue file. If you try control clicking on Chrome it opens 1 window. If you control click on Firefox it opens 2.

https://codesandbox.io/s/delicate-pond-8rt0qn?file=/src/components/HelloWorld.vue

In this example I added @click.exact.stop.prevent="()=>{}" to the inner item, but it doesn't change any behaviors.

Comment 6

[f.xrave]

It's also prudent to note that this behavior is not observed when coding raw HTML, so something about vueJS transpile adds special seasoning to make the bug happen.

Since it's not reproduce-able on FF 97, it's still a regression imo.

Comment 7

[:Gijs (he/him)]

Reporter: many thanks for the testcase, that will help. And yes, this is a regression, but we basically refactored a bunch of code so purely the fact that it used to work in the old implementation and is broken in the new one doesn't trivially point out what's wrong, unfortunately...

Olli, I'm sorry for pinging you about this, but I've tried to look into this but I'm pretty lost, so I'm hoping you can help. In the minimal testcase from comment 5, what I'm seeing is that the frontend sees 2 chromelinkclick events, both with isTrusted set to true on their source events, both with the same event target (the inner link element). The stacks I'm seeing in XCode just show them coming from an nsIRunnable, so it's not clear to me why we're ending up with 2 click events on the same element that are both "trusted" - it doesn't appear that vue is generating their own events or invoking .click() or anything like that. There's event handling on the link element but AFAICT it basically does nothing as soon as it realizes that the ctrl/meta key is pressed when clicking the link. So I'm pretty lost why we have 2 events and thus end up with 2 opened links. Doubly so because, as comment 6 notes, the same thing doesn't happen on a 'vanilla' HTML page:

data:text/html,%20 <a class="hello" href="https://google.com"><a href="https://google.com">CTRL-CLICK ME</a></a>

doesn't produce this problem. I assume it's something to do with the nested-ness of the links - but if you change the outer link element to point to mozilla.org, both tabs that open still point to google.com, and either way it's not clear to me what, if anything, the vue stuff is doing to break stuff here.

Comment 8

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

https://share.firefox.dev/35i5BNP
I see only one click but two chromelinkclicks.
Does chromelinkclick not handle nested links, but just create a new event for each?

I guess we don't set this flag https://searchfox.org/mozilla-central/rev/b671b6390e88672543b9b7c82132be655bd98856/dom/base/Element.cpp#3041 and then nested links just all trigger a new chromelinkclick.

Comment 9

[:Gijs (he/him)]

(In reply to Olli Pettay [:smaug] from comment #8)

https://share.firefox.dev/35i5BNP
I see only one click but two chromelinkclicks.
Does chromelinkclick not handle nested links, but just create a new event for each?

I guess we don't set this flag https://searchfox.org/mozilla-central/rev/b671b6390e88672543b9b7c82132be655bd98856/dom/base/Element.cpp#3041 and then nested links just all trigger a new chromelinkclick.

I see only 1 of the chromelinkclick events when trying on the plain data URI without Vue: https://share.firefox.dev/3uCxR6j . What I don't understand is why the vue bit makes a difference - both cases have nested links, so it can't just be "not handling nested links" - right?

Comment 10

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

Your testcase in comment 7 doesn't create nested links.

Comment 11

[:Gijs (he/him)]

(In reply to Olli Pettay [:smaug] from comment #10)

Your testcase in comment 7 doesn't create nested links.

Well, now I feel dumb. HTML parsers are still surprising, clearly!

Comment 12

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

The severity field is not set for this bug.
:dao, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 13

[:Gijs (he/him)]

Attachment: Bug 1759593 - prevent multiple actions also for modified-clicks on links, to prevent nested links causing multiple tabs to open, r?smaug

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/18807f1482f8
prevent multiple actions also for modified-clicks on links, to prevent nested links causing multiple tabs to open, r=smaug

Comment 15

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/18807f1482f8

Comment 16

[:Gijs (he/him)]

Unfortunately it's too late in the 99 cycle (release candidates are already built) to fix this there.