ember-power-select
ember-power-select copied to clipboard
Stack overflow when using a getter for @options using glimmer
I found a really weird issue today:
controllers/test.js
import Controller from '@ember/controller';
import EmberObject from '@ember/object';
export default class TestController extends Controller {
hello = EmberObject.create();
}
templates/test.hbs
<MyComponent
@hello={{this.hello}}
@addOne={{true}}
/>
my-component.js
export default class MyComponent extends GlimmerComponent {
get options() {
const options = [];
if (this.args.addOne) {
options.push({
value: '1',
label: 'one'
});
}
if (this.args.addTwo) {
options.push({
value: '2',
label: 'two'
});
}
return options;
}
}
my-component.hbs
<PowerSelect
@searchField="label"
@options={{this.option}}
@onChange={{optional}} as |option|
>
{{option.label}}
</PowerSelect>
When rendering I get the error Uncaught RangeError: Maximum call stack size exceeded
, as the getter is being called infinitely.
This only gets fixed if I remove @hello
from my-component
, OR I don't evaluate this.args
in the getter.
Versions:
Ember: 8b90e8320d25e354fdbfb73ff6df4c2e7aabce79
(around one month old)
Power select: 3.0.2
Glimmer: 0.14.0-alpha.9
Are you sure EPS has anything to do with the error? I find it bizarre. I don't have much experience using glimmer-components in ember myself, so I also wonder if that might be playing a role.
Can you write a reproduction in this repo?
Yes, I just did a simple <select>
with an {{#each}}
and the problem wasn't happening, it looks like EPS is not playing nice with glimmer.
I'll create a repro tomorrow, so you can check what is going on.
Either you have a typo when pasting here or a bug in your sample @options={{this.option}} should be @options={{this.options}}