Merge pull request #19597 from emberjs/fix-link-to-target

emberjs · Jun 10, 2021 · 1bcdc6f · 1bcdc6f
2 parents ea322a3 + 57907a4
commit 1bcdc6f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 1 deletion.
diff --git 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/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js b/...ages/@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/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js b/...ages/@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',