Query Params Reset to Default Values on Initial Render If transitionTo is called in beforeModel

[raytiley]

Hopefully the title and this JS bin say it all. The TL;DR; is if you call transitionTo in beforeModel on an initial load (hitting the refresh button) query params will be reset to there default state.

http://emberjs.jsbin.com/kicoro/1#

[pixelhandler]

@raytiley I'm wondering if this is a bug that exists on both 1.13 and 2.0. Also does the example work on a prior version of Ember, i.e. 1.12?

[rwjblue]

@raytiley - Do you think this is related to #12107 (root issue wise)?

[raytiley]

@rwjblue It might be the same, I really need to dig a little bit deeper to understand where the desired behavior should be happening. The underlying issue is that the qpMeta for each handler haven't been updated before the new transition starts. This happens in the finalizeQueryParamChange(

ember.js/packages/ember-routing/lib/system/route.js

Line 762 in c9bbfb6

finalizeQueryParamChange(params, finalParams, transition) {

) event which gets triggered by the router.

My basic understanding without writing a test is this. You initially enter the route with a url with query params... this creates a new transition, but never calls finalizeQueryParamChange because it is interrupted by the transitionTo call in one of the routes hooks. This new transition prepares the queryParams (https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/system/router.js#L603) but since the qpMeta was never updated by the original transition it uses all the default values. Therefore your stuck with your default values :(

[raytiley]

@pixelhandler I haven't tested other versions yet, but I don't think this area of the code has changed drastically, except for @trek's recent work on moving queryParam config to the router. I don't believe that has landed yet, but might be a nice place to change this behavior.

Ideally I think we need to finalize and queryParam changes for the current transition when calling transitionTo during an active transition. Since you can pass queryParams in to the transitionTo it still gives the new transition a way to override any queryParam changes of the previous transition call.

For anyone who is following along, as a workaround I was able to schedule the transitionTo onto the run loop in afterRender in order to keep my queryParams. You get an annoying flash of the undesired route, but its better than loosing all the incoming state. I only had this in a few places in my app, so its not a huge priority for me too get this fixed soon, just wanted to report it.

[noslouch]

+1

@raytiley I tried your workaround but my queryParams are still getting stripped like so:

Ember.run.scheduleOnce('afterRender', this, function() {
    this.replaceWith('campaign.show.onestep', { queryParams });
});

That's the correct syntax, yes?

[kmiyashiro]

@noslouch You could also try the routerTransitions queue.

[kmiyashiro]

I do not have this exact issue, but I do have issues with transitionTo({queryParams: { foo: 'bar' }}); inside beforeModel on initial load. I just started getting the an error in 2.1, it was fine in 2.0. Somehow, my query params are persisted and the app behaves as expected, the only weird thing is this error.

From phantom:

TypeError: undefined is not an object (evaluating 'handlerInfos[handlerInfos.length - 1].name')

From chrome:

TypeError: Cannot read property 'name' of undefined
    at _emberRuntimeSystemObject.default.extend.actions.finalizeQueryParamChange (ember.debug.js:25996)
    at Object.triggerEvent (ember.debug.js:28253)
    at Object.trigger (ember.debug.js:50891)
    at finalizeQueryParamChange (ember.debug.js:50040)
    at Object.Router.queryParamsTransition (ember.debug.js:49418)
    at Object.getTransitionByIntent (ember.debug.js:49331)
    at Object.Router.transitionByIntent (ember.debug.js:49436)
    at doTransition (ember.debug.js:50008)
    at Object.Router.transitionTo (ember.debug.js:49505)
    at _emberRuntimeSystemObject.default.extend._doTransition (ember.debug.js:27978)

[Glennvd]

@kmiyashiro +1, I have exactly the same problem after upgrading to 2.1.0

TypeError: Cannot read property 'name' of undefined
    at _emberRuntimeSystemObject.default.extend.actions.finalizeQueryParamChange (ember.debug.js:25996)
    at Object.triggerEvent (ember.debug.js:28253)
    at Object.trigger (ember.debug.js:50891)
    at finalizeQueryParamChange (ember.debug.js:50040)
    at Object.Router.queryParamsTransition (ember.debug.js:49418)
    at Object.getTransitionByIntent (ember.debug.js:49331)
    at Object.Router.transitionByIntent (ember.debug.js:49436)
    at doTransition (ember.debug.js:50008)
    at Object.Router.transitionTo (ember.debug.js:49505)
    at _emberRuntimeSystemObject.default.extend._doTransition (ember.debug.js:27978)

[chrism]

This has just bitten me as well, if I add this to a completely unrelated route

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo('works');
  }
});

Then my query params seem to get stripped and I get this error...

TypeError: Cannot read property 'name' of undefined
    at _emberRuntimeSystemObject.default.extend.actions.finalizeQueryParamChange (ember.debug.js:25680)
    at Object.triggerEvent (ember.debug.js:27911)
    at Object.trigger (ember.debug.js:52341)
    at finalizeQueryParamChange (ember.debug.js:51490)
    at Object.Router.queryParamsTransition (ember.debug.js:50868)
    at Object.getTransitionByIntent (ember.debug.js:50781)
    at Object.Router.transitionByIntent (ember.debug.js:50886)
    at doTransition (ember.debug.js:51458)
    at Object.Router.transitionTo (ember.debug.js:50955)
    at _emberRuntimeSystemObject.default.extend._doTransition (ember.debug.js:27636)

I'm using Ember: 2.3.0-canary+3486f33c

Thanks

[GCheung55]

Happening on ember@2.2.0 for me.

[ZackMattor]

Happening here too... ember@2.2.0

[ZackMattor]

I'm with @kmiyashiro, everything seems to be working as expected... but i'm still getting the error in console. I can easily recreate it in a twiddle. Just load the following with the console open. You can see the error in ember 2.1 and 2.2, doesn't seem to appear in 2.0.

https://ember-twiddle.com/86849f6610f3a68a9840?route=%2F%3Ftest%3Dfoo

[taras]

Here is a work around that you can use to trigger transitions while this bug remains unresolved.

let RedirectAfterDidTransition = Ember.Mixin.create({
  redirectAfterDidTransition(...args) {
    this.router.one('didTransition', ()=>{
      this.router.transitionTo(...args);
    });
  }
});

export default Route.extend(RedirectAfterDidTransition, {
  afterModel() {
    this.redirectAfterDidTransition('index');
  }
});

I cloned the above Twiddle and added the example https://ember-twiddle.com/2d49a9d1aa3ddaff6ef5?numColumns=1&route=%2F%3Ftest%3Dfoo

Note: this will wait for the transition to finish before doing the redirect.

[taras]

Here is a simpler version that seems to work as well in my code

import Ember from 'ember';

// This mixin provides `abortAndTransitionTo` method that'll abort the current
// transition and transition to specified parameters.
// It takes same arguments as Route#transitionTo
// it's necessary because of https://github.com/emberjs/ember.js/issues/12169
let AbortAndTransitionTo = Ember.Mixin.create({
  abortAndTransitionTo(...args) {
    this.router.router.activeTransition.abort();
    this.router.transitionTo(...args);
  }
});

export default Route.extend(AbortAndTransitionTo, {
  afterModel() {
    this.abortAndTransitionTo('index');
  }
});