From 6efbfba95735acd38655e9ecfdb179c46e5b1ac9 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Thu, 10 Jun 2021 10:34:04 -0700
Subject: [PATCH] [BIGFIX release] Fix `<LinkTo>` with nested children

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 57907a4d7d91aa58b3b3ac1258e639ce221f9492)
---
 .../glimmer/lib/components/link-to.ts         |  2 +-
 .../components/link-to/routing-angle-test.js  | 41 +++++++++++++++++++
 .../components/link-to/routing-curly-test.js  | 41 +++++++++++++++++++
 3 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/packages/@ember/-internals/glimmer/lib/components/link-to.ts b/packages/@ember/-internals/glimmer/lib/components/link-to.ts
index 40ee661d959..a139ba18c80 100644
--- a/packages/@ember/-internals/glimmer/lib/components/link-to.ts
+++ b/packages/@ember/-internals/glimmer/lib/components/link-to.ts
@@ -138,7 +138,7 @@ class LinkTo extends InternalComponent implements DeprecatingInternalComponent {
       return;
     }
 
-    let element = event.target;
+    let element = event.currentTarget;
     assert('[BUG] must be an <a> element', element instanceof HTMLAnchorElement);
 
     let isSelf = element.target === '' || element.target === '_self';
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
index 60ac6577dac..fa7e4c22561 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
@@ -92,6 +92,47 @@ moduleFor(
       );
     }
 
+    async ['@test [GH#19546] it navigates into the named route when containing other elements'](
+      assert
+    ) {
+      this.addTemplate(
+        'about',
+        `
+        <h3 class="about">About</h3>
+        <LinkTo @route='index' id='home-link'><span id='inside'>Home</span></LinkTo>
+        <LinkTo @route='about' id='self-link'>Self</LinkTo>
+        `
+      );
+
+      await this.visit('/about');
+
+      assert.equal(this.$('h3.about').length, 1, 'The about template was rendered');
+      assert.equal(
+        this.$('#self-link.active').length,
+        1,
+        'The self-link was rendered with active class'
+      );
+      assert.equal(
+        this.$('#home-link:not(.active)').length,
+        1,
+        'The other link was rendered without active class'
+      );
+
+      await this.click('#inside');
+
+      assert.equal(this.$('h3.home').length, 1, 'The home template was rendered');
+      assert.equal(
+        this.$('#self-link.active').length,
+        1,
+        'The self-link was rendered with active class'
+      );
+      assert.equal(
+        this.$('#about-link:not(.active)').length,
+        1,
+        'The other link was rendered without active class'
+      );
+    }
+
     async [`@test [DEPRECATED] it doesn't add an href when the tagName isn't 'a'`](assert) {
       this.addTemplate(
         'index',
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
index 138a66f7068..2ecf5ae4cf0 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
@@ -92,6 +92,47 @@ moduleFor(
       );
     }
 
+    async ['@test [GH#19546] it navigates into the named route when containing other elements'](
+      assert
+    ) {
+      this.addTemplate(
+        'about',
+        `
+        <h3 class="about">About</h3>
+        <div id="home-link">{{#link-to route='index'}}<span id='inside'>Home</span>{{/link-to}}</div>
+        <div id="self-link">{{#link-to route='about'}}Self{{/link-to}}</div>
+        `
+      );
+
+      await this.visit('/about');
+
+      assert.equal(this.$('h3.about').length, 1, 'The about template was rendered');
+      assert.equal(
+        this.$('#self-link > a.active').length,
+        1,
+        'The self-link was rendered with active class'
+      );
+      assert.equal(
+        this.$('#home-link > a:not(.active)').length,
+        1,
+        'The other link was rendered without active class'
+      );
+
+      await this.click('#inside');
+
+      assert.equal(this.$('h3.home').length, 1, 'The home template was rendered');
+      assert.equal(
+        this.$('#self-link > a.active').length,
+        1,
+        'The self-link was rendered with active class'
+      );
+      assert.equal(
+        this.$('#about-link > a:not(.active)').length,
+        1,
+        'The other link was rendered without active class'
+      );
+    }
+
     async [`@test [DEPRECATED] it doesn't add an href when the tagName isn't 'a'`](assert) {
       this.addTemplate(
         'index',