[Bug] LinkTo won't transition if a parent element stopPropagation #19546

jbescoyez · 2021-05-14T09:05:23Z

🐞 Describe the Bug

When a <LinkTo> is inserted inside an element that stopPropagation of click's, it won't transition but rather fallback on a default <a> behavior.

🔬 Minimal Reproduction

Put a <LinkTo> inside an element that stopPropagation on click.

https://ember-twiddle.com/bac43dc0c91d12e7a9afb1d4adfcaabd

😕 Actual Behavior

No transition
Default <a> behavior

🤔 Expected Behavior

An Ember transition to the route.

🌍 Environment

Ember: 3.26.1
Node.js/npm: 12.19.0 / 6.14.8
OS: MacOS 10.15.5
Browser: Chrome 90.0.4430.212

The text was updated successfully, but these errors were encountered:

chancancode · 2021-05-24T23:03:03Z

This is one of those hairy things that should be fixed in 3.27 / RFC #671. This is true for all classic components – because they use event delegation and listens on the rootElement (body by default), if the event is canceled before it makes it to the top then it will not trigger on the component. This is something to generally pay attention to when mixing classic components and modifiers. In the long run it will be less of an issue as components are migrated, and in the case of <LinkTo> specifically, 3.27 moves away from the classic implementation.

kpfefferle · 2021-05-27T20:07:26Z

@chancancode Did you mean to link to emberjs/rfcs#671 instead of #671?

We are now experiencing an issue in our Production builds after upgrading to 3.27 where LinkTos will (seemingly) randomly decide to act as standard <a> tags instead of as Ember route transitions. The work related to the RFC seems to be a likely culprit 😬

chancancode · 2021-05-27T23:35:16Z

@kpfefferle hmm, that is strange: I would think in 3.27 you would be less likely to run into issues like that, because on the modernized version the handler is attached directly on the <a> element using the {{on}} modifier, whereas before it is using event delegation on the <body>, so if the event get canceled before it reaches the top things would not work as expected.

One thing you can try is to call LinkComponent.reopen(). This forces ember to fallback to the old implementation (you will get a deprecation), so you can use that to test if the issues you are expecting is related to the change or not.

sinankeskin · 2021-05-30T19:26:29Z

We are now experiencing an issue in our Production builds after upgrading to 3.27 where LinkTos will (seemingly) randomly decide to act as standard <a> tags instead of as Ember route transitions. The work related to the RFC seems to be a likely culprit 😬

Same here with 3.27. I don't now how linkTo decides. As @kpfefferle said some behaves like an a tag and creates a request some uses the router. No issue on 3.26.x.

ghost · 2021-06-10T13:01:42Z

Something very similar here: upgrading to 3.27+ would make linkTos that contain any other tag, anything more than just text, behave like regular <a>s and reload the app instead of transitioning. It happens for production builds only. In dev they retain the usual behaviour.

ghost · 2021-06-10T13:36:33Z

This (from -internals/glimmer/lib/components/link-to.ts):

    let element = event.target;
    assert('[BUG] must be an <a> element', element instanceof HTMLAnchorElement);

    let isSelf = element.target === '' || element.target === '_self';

    if (isSelf) {
      this.preventDefault(event);
    } else {
      return;
    }

fails when the LinkTo contains any other element, and the click goes to the contained element. The element is the contained element, assert is skipped in production, and isSelf is false.

kpfefferle · 2021-06-10T13:43:06Z

@lele-melis This is a great find! It seems consistent with the issues we're seeing too - as the links that exhibit this behavior for us often contain something like an SVG icon 🕵️‍♀️

@chancancode Does this additional info give you any ideas why the recent refactor may have caused this regression? Did removing the body event delegation somehow break the event delegation from possible LinkTo child elements? 🤔

During bubbling, `event.target` may point to a child element whereas `event.currentTarget` always points to the element where the handler was attached, which is what we want here. Reported in a comment on #19546, though this may be a distinct issue from the original report as it was reported as a default-cancelling parent element interfering with the nested `<LinkTo>`, and this is the other way around.

chancancode · 2021-06-10T17:40:27Z

@lele-melis @kpfefferle Good find, thanks for reporting and sorry it wasn't caught sooner (the assertions do run in tests, as well as inside the test suite in apps). I proposed a fix in #19597, but I am not sure if this is actually the same issue @jbescoyez reported as this parent-child relationship is the other way around here.

During bubbling, `event.target` may point to a child element whereas `event.currentTarget` always points to the element where the handler was attached, which is what we want here. Reported in a comment on #19546, though this may be a distinct issue from the original report as it was reported as a default-cancelling parent element interfering with the nested `<LinkTo>`, and this is the other way around.

During bubbling, `event.target` may point to a child element whereas `event.currentTarget` always points to the element where the handler was attached, which is what we want here. Reported in a comment on #19546, though this may be a distinct issue from the original report as it was reported as a default-cancelling parent element interfering with the nested `<LinkTo>`, and this is the other way around. (cherry picked from commit 57907a4)

chancancode · 2021-06-10T19:34:18Z

That fix was released in 3.27.5

During bubbling, `event.target` may point to a child element whereas `event.currentTarget` always points to the element where the handler was attached, which is what we want here. Reported in a comment on emberjs#19546, though this may be a distinct issue from the original report as it was reported as a default-cancelling parent element interfering with the nested `<LinkTo>`, and this is the other way around.

chancancode mentioned this issue Jun 10, 2021

[BIGFIX release] Fix <LinkTo> with nested children #19597

Merged

vihai mentioned this issue Jan 7, 2022

[Bug] LinkTo inside inline SVG reloads application #19891

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug] LinkTo won't transition if a parent element stopPropagation #19546

[Bug] LinkTo won't transition if a parent element stopPropagation #19546

jbescoyez commented May 14, 2021

chancancode commented May 24, 2021

kpfefferle commented May 27, 2021

chancancode commented May 27, 2021 •

edited

sinankeskin commented May 30, 2021

ghost commented Jun 10, 2021 •

edited by ghost

ghost commented Jun 10, 2021 •

edited by ghost

kpfefferle commented Jun 10, 2021

chancancode commented Jun 10, 2021

chancancode commented Jun 10, 2021

[Bug] LinkTo won't transition if a parent element stopPropagation #19546

[Bug] LinkTo won't transition if a parent element stopPropagation #19546

Comments

jbescoyez commented May 14, 2021

🐞 Describe the Bug

🔬 Minimal Reproduction

😕 Actual Behavior

🤔 Expected Behavior

🌍 Environment

chancancode commented May 24, 2021

kpfefferle commented May 27, 2021

chancancode commented May 27, 2021 • edited

sinankeskin commented May 30, 2021

ghost commented Jun 10, 2021 • edited by ghost

ghost commented Jun 10, 2021 • edited by ghost

kpfefferle commented Jun 10, 2021

chancancode commented Jun 10, 2021

chancancode commented Jun 10, 2021

chancancode commented May 27, 2021 •

edited

ghost commented Jun 10, 2021 •

edited by ghost

ghost commented Jun 10, 2021 •

edited by ghost