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

[GavinJoyce]

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

[GavinJoyce]

possibly related: https://github.com/emberjs/ember.js/issues/10195

[GavinJoyce]

Failing test: https://github.com/emberjs/ember.js/pull/13165

[GavinJoyce]

@rwjblue perhaps you could reopen this issue due to https://github.com/emberjs/ember.js/pull/13262?

[rwjblue]

Good point. Reopened.

[pixelhandler]

@GavinJoyce I updated the twiddle example using v2.5.1 https://ember-twiddle.com/5e91f27f1df42b6e41231f53a12af3da?openFiles=application.template.hbs%2C&route=%2Fpage1 and labeled "BUG"

[kjhangiani]

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]

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.

[buschtoens]

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

[locks]

Closed by https://github.com/emberjs/ember.js/pull/13169

[GavinJoyce]

@locks is the link to the PR above incorrect? I reverted that PR in https://github.com/emberjs/ember.js/pull/13262 as it introduced another issue.

Perhaps this issue was fixed in another PR? Or, perhaps this issue is still open?

[locks]

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

[anpenava]

this issue still happening for me, I am using ember-cli version 2.18.2

[buschtoens]

@anpenava the ember-cli version should be irrelevant here. What is your Ember.js (ember-source) version? :)

[anpenava]

@buschtoens "ember-source": "~2.18.0"

[pixelhandler]

This appears to still be an issue I updated the ember-twiddle example, https://ember-twiddle.com/5e91f27f1df42b6e41231f53a12af3da?openFiles=application.controller.js%2C

[joegaudet]

A possibly related issue, I've noticed that if some of the details on a link change, like say the query parameters, while the link is being transitioned into it causes the same issue.