Ember link-to gets active class for the wrong transition

Question

This is one of those Ember issues that I'm unable to replicate anywhere but my project. The visual effect of the problem is that the active class on a link-to is one transition behind. I'll click a link and the link that goes to the page I was just on is highlighted with the active class.

I've started digging into the link-to component code to figure out how active is computed. But it is based on _routing.currentState and I'm not sure what that is. The currentState, and other bits of info, are passed to the routing's isActiveForRoute which then calls the routerState's isActiveIntent. And that function calls another isActiveIntent and compares some more things together. All this seems like a large easter egg hunt for something (the root of my problem) that is probably not in Ember's code anyways.

I feel like the following snippet sums up the problem I'm having. The targetRouteName is the route that is being directed to by the link. _routing.currentRouteName seems to be pointing to the route the browser is currently looking at. The fact these match makes me feel like the link should be active, but the active function returns false.

> link.get('targetRouteName')
"parentRoute.pageA.index”
> link.get('_routing.currentRouteName')
"parentRoute.pageA.index”
> link.get('active')
false

For reference this is after finding the link via the Chrome extension and showing all components. I then did link = $E.

For the wrong link (the one that does get the active class) I get:

> link.get('targetRouteName')
"parentRoute.pageB.index"
> link.get('_routing.currentRouteName')
"parentRoute.pageA.index"
> link.get('active')
"active"

Additional Raw Information

The routes I'm dealing with are nested. But it is a pretty standard nesting, very much like the one I have in my ember-twiddle (e.g. page-a, page-b, page-c).

There is a model hook on the parent route and on the indexs of the children routes. But the children routes reference (this.modelFor(...)) the parent.

My template is referencing the .index of those routes. They are standard link-to components. They do not include model information.

I'm running Ember-cli 1.13.8, Ember 2.0.0, and Ember Data 2.0.0-beta.1.

What I have tried so far

Upgrading to 1.13.0
Moving the file structure to pods
Removing the functions in my authentication route which a lot of these routes inherit from.
Upgrading to 2.0.0
Trying to remove/add .index on my routes
Tried replicating on ember-twiddle
Doing ember init with ember-cli to see if my router or application setup was different from the standard layout and it doesn't differ in any significant way.
Adding model information to one of the links, that didn't change anything and since it didn't call the model hooks it messed up the view.
Asked on the slack channel

Please Help

I've had this issue for a couple weeks now and I'm not sure where else to look. I'd love any suggestions on how I can resolve this.

Update

This ended up getting fixed in 2.1.0.

I had this problem once, active class was put one step behind. It was caused by multiple level of computed properties from which links were generated. These computed properties were wrongly modified(it made active class now) and then automatically recomputed so it seemed like everything was ok. — Keo
Thanks @Keo. Glad to hear I'm not the only one. Unfortunately, my links are standard strings, nothing dynamic about them. — RyanJM

sbatson5 sbatson5 · Accepted Answer · 2015-10-09T20:15:51

I have run into something similar when using a component with a nav. Here was my approach:

I added a controller (I know, you should be steering away form these, but I needed to). My controller:

import Ember from 'ember';

const {
  Controller,
  inject
} = Ember;

export default Controller.extend({
  application: inject.controller(),
});

Then, in my template, I could pass application to my component.

{{account/account-icon-nav currentRouteName=application.currentRouteName}}

In my component, I set set up a function to test my current route names:

import Ember from 'ember';

const {
  Component,
  computed,
  get
} = Ember;

const activeParentRoute = function(dependentKey, parentRouteName) {
  return computed(dependentKey, {
    get() {
      return get(this, dependentKey).indexOf(parentRouteName) > -1;
    }
  });
};

export default Component.extend({
  isYourProfile: activeParentRoute('currentRouteName', 'account.your-profile'),
  isYourActivity: activeParentRoute('currentRouteName', 'account.your-activity'),
  isYourGoals: activeParentRoute('currentRouteName', 'account.your-goals')
});

Then bind the active class yourself:

<div class="icon-nav md-hidden">
  {{link-to "" "account.your-profile" classBinding=":profile isYourProfile:active" title="Your Life"}}
  {{link-to "" "account.your-activity" classBinding=":activity isYourActivity:active" title="Your Money"}}
  {{link-to "" "account.your-goals" classBinding=":goals isYourGoals:active" title="Your Goals"}}
</div>

I know this is a bit different since we are doing it within a component, but I hope it helps. You can bind these classes yourself by passing the application around.