[BUGIFX] link-to active class applied when params change

emberjs · Jan 12, 2018 · 1facdd0 · 1facdd0
1 parent ee85052
commit 1facdd0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/ember-glimmer/lib/components/link-to.ts b/packages/ember-glimmer/lib/components/link-to.ts
@@ -573,7 +573,7 @@ const LinkComponent = EmberComponent.extend({
     return this.get('_active') ? get(this, 'activeClass') : false;
   }),
 
-  _active: computed('_routing.currentState', function computeLinkToComponentActive(this: any) {
+  _active: computed('_routing.currentState', 'attrs.params', function computeLinkToComponentActive(this: any) {
     let currentState = get(this, '_routing.currentState');
     if (!currentState) { return false; }
     return this._isActive(currentState);

diff --git a/packages/ember-glimmer/tests/integration/components/link-to-test.js b/packages/ember-glimmer/tests/integration/components/link-to-test.js
@@ -43,6 +43,30 @@ moduleFor('Link-to component', class extends ApplicationTest {
     });
   }
 
+  ['@test re-computes active class when params change'](assert) {
+    let controller;
+
+    this.addTemplate('application', '{{link-to "foo" routeName}}');
+
+    this.add('controller:application', Controller.extend({
+      init() {
+        this._super(...arguments);
+        controller = this;
+      },
+      routeName: 'index'
+    }));
+
+    this.router.map(function() {
+      this.route('bar', { path: '/bar' });
+    });
+
+    return this.visit('/bar').then(() => {
+      assert.equal(this.firstChild.contains('active'), false);
+      this.runTask(() => set(controller, 'routeName', 'bar'));
+      assert.equal(this.firstChild.contains('active'), true);
+    });
+  }
+
   ['@test escaped inline form (double curlies) escapes link title']() {
     this.addTemplate('application', `{{link-to title 'index'}}`);
     this.add('controller:application', Controller.extend({