cibernox / ember-power-select

The extensible select component built for ember.
http://www.ember-power-select.com
Other
540 stars 377 forks source link

Stack overflow when using a getter for @options using glimmer #1254

Open IAmJulianAcosta opened 5 years ago

IAmJulianAcosta commented 5 years ago

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

cibernox commented 5 years ago

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?

IAmJulianAcosta commented 5 years ago

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.

ChristianGreinke commented 5 years ago

Either you have a typo when pasting here or a bug in your sample @options={{this.option}} should be @options={{this.options}}