ember.js: `{{link-to}}` transitioning classes are incorrect after `transition.abort()`

twiddle: https://ember-twiddle.com/8aa9da800a7883b6c59a?openFiles=routes.page2.js%2C

The ember-transitioning-in and .ember-transitioning-out classes don’t seem to be updated correctly when linking to a route that aborts the transition:

export default Ember.Route.extend({
  beforeModel: function(transition) {
    return delay(1000).then(function() {
      transition.abort();   
    });
  }
});

I’ll try to create a failing test now

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 6
Comments: 16 (11 by maintainers)

Most upvoted comments

Oops, someone posted it on the triage channel. Reopening!

locks on Feb 26, 2018

Also experiencing this issue all of a sudden. Probably since upgrading some dependencies. I’ll try to reproduce it.

buschtoens on Jan 31, 2018

So, this was somewhat of a rabbithole. I was able to reproduce the specific issue I was having on a twiddle here:

https://ember-twiddle.com/128d462ce1fa0acdebd696338ca3dc14?openFiles=templates.application.hbs%2C

In particular, my issue was due to a transition.abort() followed by an Ember.run.later(transition, transition.retry, 50) in the willTransition hook of a route. The problem was specifically when changing between the same route, with just a positional param model_id change.

I found a workaround here: https://github.com/emberjs/ember.js/issues/10557 which thankfully works (essentially replaces transition.retry with a this.transitionTo)

In my digging, I found a number of related tickets, linking them all here - these all seem related to me: https://github.com/emberjs/ember.js/issues/10557 (solution found here) https://github.com/emberjs/ember.js/issues/10195 https://github.com/emberjs/ember.js/issues/13164 https://github.com/emberjs/ember.js/issues/12419 https://github.com/emberjs/ember.js/issues/15158 https://github.com/emberjs/ember.js/issues/15518 https://discuss.emberjs.com/t/transitionto-not-applying-active-class-to-link-to-elements/12266/6

There are a number of twiddles / jsbins across those issues that reproduce different variations of the issue. They all seem related to a transition.abort breaking things, however.

Hopefully this helps identify the issue. We were experiencing it in our production app on the latest ember (2.14.x), but it has been an issue for us for quite some time. I was previously working around it by using jquery to fix the classes, I only just now spent the time to investigate why it was occurring.

kjhangiani on Aug 14, 2017

Just got bit by this issue, found via #15518. Is there a workaround to force ember to recompute link-to active states? The workaround mentioned in that ticket does not seem to work for me.

kjhangiani on Aug 14, 2017