Stale selection and options when options are changed

I’m seeing this buggy behavior where options and selections are stale when options change. I’m not sure if there’s a way to immediately clear the displayed options (and currently selected item) when options are changed, and set selected to null.

I’ve tested this issue with version 0.7.0.

I have a scenario where selecting an option in one dropdown loads options for a 2nd dropdown. The problem is if a selection is made in the 2nd dropdown, and then the user changes the 1st dropdown selection, the following can be observed in the 2nd dropdown:

• Stale selection (data related to previous selection made in 1st dropdown)
• Stale options (again, related to previous selection) can be seen when expanded while the “Loading options…” message appears
• I can select a stale option, and after loading of the new options is complete, the stale selection is still displayed and is the value of selected

The behavior I am expecting is once the dropdown’s data is being loaded (“Loading options…”) that the displayed selection and options are cleared. The selected value should no longer point to a stale option, and should probably be set to null.

Repro steps

To see this behavior in action, refer to “The loading state” example from the docs here: http://www.ember-power-select.com/docs/the-list

In that example, follow these steps:

1. Click “Refresh collection”
2. Select an item
3. Click “Refresh collection”
4. Observe the item selected in step 2 is still visible
5. Quickly open the options and notice the “Loading options…” is visible, along with stale options

In this example, after the promise resolves, the item selected gets re-selected since the data matches. In my scenario that data will be different, but I still have a stale selection.

To further illustrate the issue, use the same code from the above example, but add a count and change generatePromise to the following:

let count = 0;
function generatePromise() {
  count++;
  let values = count % 2 === 0 ? ['one', 'two', 'three'] : [1, 2, 3];
  return new Ember.RSVP.Promise((resolve) => {
    setTimeout(() => resolve(values), 5000);
  });
}

In this example, the initial options are numeric. At step 3, when new data is coming in, you can see the stale numeric options are still there and selectable:

Repeat the steps above, and you will end up with a stale numeric selection, with new options as words.

[cibernox]

Published in 1.9.9

[cibernox]

@k-dauda @zardaloop I finally could dedicate some time to this today.

Once #990 is merged, this twiddle should work as you want: https://ember-twiddle.com/574971bab5e77c125656b596d45691e7?openFiles=controllers.application.js%2C