[Bug] "Maximum call stack size exceeded" error when abort transitions with query params only

[guanlun]

🐞 Describe the Bug

We have a willTransition action handler in the route class:

routes/application.js

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default Route.extend({
  queryParams: {
    foo: {
      refreshModel: true,
    }
  },

  @action
  willTransition(transition) {
    // This causes the stackoverflow
    transition.abort();
    }
});

The template only has a simple button:

application.hbs:

<button {{on "click" this.updateQueryParam}}>Update Query Params</button>

Calling router.transitionTo with query params from the controller causes a "Maximum call stack size exceeded" error

controllers/application.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class ApplicationController extends Controller {
  @service('router') router;

    @action
    updateQueryParam() {
        this.router.transitionTo({
      queryParams: {
        foo: 'bar'
      }
    });
  }
}

🔬 Minimal Reproduction

Above is the code for minimal reproduction. Ember Twiddle no longer allows me to save my code, but pasting it in there and clicking the button with the console open reveals the stackoverflow issue.

😕 Actual Behavior

The willTransition hook gets called repeatedly until the stackoverflow occurs.

🤔 Expected Behavior

It should not exceed call stack size.

🌍 Environment

• Ember: 3.28.11
• Node.js/npm: 16.19.0
• OS: Reproducible on window and mac
• Browser: Reproducible on all major browsers

[chenbaruchchen]

Im trying to reproduct this error