Typing in a PowerSelectMultiple's trigger (when search is disabled) triggers bad onChange

[kevinkucharczyk]

Let's take the PowerSelectMultiple example from the docs, but remove @searchEnabled (this is important - when search is enabled, this bug doesn't happen because the trigger is then an input):

<PowerSelectMultiple
  @options={{this.names}}
  @selected={{this.name}}
  @placeholder="Select some names..."
  @onChange={{fn (mut this.name)}}
  as |name|
>
  {{name}}
</PowerSelectMultiple>

When we click the trigger to open the dropdown, then click it again to close and start typing with the keyboard, the Power Select component will call onChange with an option item, if the typed keyboard character matches a result. Here's a screencast of the process:

The click-to-open then click-to-close is necessary, because it leaves the trigger in a focused state.

The problem is that, when we use PowerSelectMultiple, the expectation is that selected will be an array, and likewise onChange will be called with an array of items. However, in this situation, onChange is called with one single option item - in the docs example, that's a string.

This happens because:

• handleTriggerKeydown is attached to the trigger:

  ember-power-select/addon/components/power-select.hbs

  Line 37 in 7f8dc10

  {{on "keydown" this.handleTriggerKeydown}}

  (so it's called when the trigger is in focus after closing it)
• handleTriggerKeydown will call the triggerTypingTask task
• this, in turn, will use the keyboard character to try and find a match. If one exists, that one match will be selected via

  ember-power-select/addon/components/power-select.ts

  Line 624 in 7f8dc10

  this.storedAPI.actions.select(match, e);

I'm not sure, however, what the best fix is. Perhaps PowerSelectMultiple should discard the current selection and call onChange with an array of 1 item when this scenario happens. PowerSelects _select action would need updating, I believe.