allowClear not working in ember-power-select v4.1.0

[flynnawtc]

trafficstars

Hi I am currently upgrading by application to Ember Octane/Glimmer components etc. and having upgraded ember-power-select to version 4.1.0, the allowClear functionality no longer appears to be working properly. My onUpdate action is correctly called, but the displayed value is not removed. Downgrading to version 3.0.6 resolves the issue for the short term, but is not a long term solution.

I believe that I have narrowed down the issue to the _updateSelected() method in power-select.ts where, if the previously selected value was Promise-like, then this._resolvedSelected is not cleared in line with the new (null) value of this.args.selected

I have a solution that works for me as follows:

  @action
  _updateSelected(): void {
    if (!this.args.selected) {
      this._resolvedSelected = undefined;
      this._highlight(this.args.selected)
    }
    else if (typeof this.args.selected.then === 'function') {

instead of

  @action
  _updateSelected(): void {
    if (!this.args.selected) return;
    if (typeof this.args.selected.then === 'function') {

but I am unclear whether or not this is a complete solution. I am wondering that if the updated value of this.args.selected is NOT a promise but the previous value was promise-like, then we could be leaking observers within this function.

Thank you @cibernox for all your work on this addon. It is much appreciated Adrian

[flynnawtc]

Hi In a similar manner, _updateOptions requires that this._resolvedOptions is reset to null in the event that this.args.options changes from something promise-like to something that is not (e.g. a simple array) A solution that seems to work is to insert one line near the end of that function as follows:

    } else {
      this._resolvedOptions = undefined;  //Reset _resolvedOptions so that this.args.options will be displayed in the dropdown
      scheduleOnce('actions', this, this._resetHighlighted);
    }

Thanks again for a very useful component Adrian

[cibernox]

Interesting, thanks for reporting. Are you able to create a failing test for the bug? If so I think I can merge a fix next week.

[flynnawtc]

Hi Here is a test for the second item. I have been unable to pull together one for the allowClear issue - I can't find any existing tests of @allowClear that I can copy.

  test('Passing as options of a `store.findAll`, followed by a simple array works', async function(assert) {
    this.server.createList('user', 10);
    this.server.timing = 200;
    this.users = [];
    await render(hbs`
      <PowerSelect @options={{users}} @searchField="name" @onChange={{action (mut foo)}} @searchEnabled={{true}} as |option|>
        {{option.name}}
      </PowerSelect>
    `);
    let users = this.store.findAll('user');
    this.set('users', users);
    let promise = clickTrigger();
    await waitFor('.ember-power-select-option');
    assert.dom('.ember-power-select-option').hasText('Loading options...', 'The loading message appears while the promise is pending');
    await promise;
    assert.dom('.ember-power-select-option').exists({ count: 10 }, 'Once the collection resolves the options render normally');
    promise = clickTrigger();
    await promise;
    assert.dom('.ember-power-select-option').exists({ count: 0 }, 'Once the selection box is closed, there are no options shown');

    let filteredUsers = users.filter((user) => user.name.includes('2'));
    this.set('users', filteredUsers);
    promise = clickTrigger();
    await promise;
    assert.dom('.ember-power-select-option').exists({ count: 1 }, 'After filtering, the reduced list is shown');
  });

I have tried this as part of ember-data-test.js

Hope this helps Adrian

[Bounder]

We run into the same issue. The fixed described also solves the problem we are having with clearing the value of the select component. Thank you @cibernox for looking into this.

[fsmanuel]

@cibernox I'm facing the same issue and could also fix it like @flynnawtc did. Not sure if the reset of this.highlighted is needed but should be this._highlight(undefined) for symmetry I think.

Thanks @flynnawtc for investigating!

[fsmanuel]

Related #1467

[aayousry]

@cibernox, There are two proposed solutions to override the _updateSelected method. One is mentioned here and the other is mentioned in https://github.com/cibernox/ember-power-select/issues/1467. I'm curious as to which one you think is the better solution and if there are any plans to adopt one of those solutions.