transitionTo() not applying 'active' class to link-to elements


#1

I am calling transitionTo() from within a route’s willTransition() action hook under certain conditions. I provide transitionTo() an argument that references a nested route, e.g. 'home.users.details'.

The transition occurs, but the 'active' class does not get applied to any of the {{link-to}} helper elements. If I manually navigate to the desired route by clicking on the {{link-to}} helper elements, the active class does get applied.

Why isn’t transitionTo() applying 'active' to the routes or subroutes that it is transitioning to? How to fix?


#2

If you can isolate the issue and push a sample app somewhere I’d be happy to look at it.


#3

Sure - here’s an ember twiddle link: https://ember-twiddle.com/64aa369eabde7f1f8b3bfff3cf0a91cc?openFiles=routes.home.js%2C

Instructions are at the twiddle.


#4

What threw me off was the transitionTo inside of the willTransition hook. Is the idea to transition to home.other when navigating to support?

If so: https://ember-twiddle.com/52d47e551b0a2a8bd9482fa2a9571f3a?openFiles=routes.support.js%2C


#5

Thanks for the reply Jason.

There’s some more to the story. The idea is that I am storing the route name every time the user performs a navigation. If the user is at home.users, then navigates to support, then clicks on home, my stored flags will transition to home.users rather than the top-level home route. The redirect hook you’re using doesn’t seem to allow that sort of behavior to occur.

Curious, why does the transitionTo() call inside redirect() call cause the active links to be highlighted correctly, and the transitionTo() call inside willTransition() fails?

Thanks again.


#6

Hi All,

I’m circling back to this issue - it still doesn’t work. See the original twiddle and follow the instructions there to observe what seems like a real bug.

An alternative - is there a way to manually update the link’s class so that it is set to ‘active’ rather than relying on the framework? I wouldn’t want to do this but may have to if the original issue can’t be solved.

This is the documentation I’ve been using while working on this problem: https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_handling-current-route Thanks.

https://ember-twiddle.com/64aa369eabde7f1f8b3bfff3cf0a91cc?openFiles=routes.home.js%2C