can multiSelect be Possible with ember=power-select?

Question

I have tried everything with ember-power-select addon. But I'm not able to implement multi-select with ember-power-select. I need to select multiple options for a single group.

Is it Possible?

Answer 1

Yes, Ember Power Select has a feature of multiple selection.

You need to use {{#power-select-multiple}}. The component accepts an array of values and the selected values (by default) will be listed in the component side by side.

{{#power-select-multiple
  options=names
  selected=name
  placeholder="Select some names..."
  onchange=(action (mut name))
  as |name|
}}
  {{name}}
{{/power-select-multiple}}

You can check the feature and adapt it to what you want to achieve in the official docs: https://ember-power-select.com/docs/multiple-selection

Answer 2

You might need to use grouped option with power-select-multiple.

hbs:

{{#power-select-multiple
  options=groupedNumbers
  selected=number
  placeholder="Select some numbers..."
  onchange=(action (mut number))
  as |number|
}}
  {{number}}
{{/power-select-multiple}}

js:

groupedNumbers: [
  { groupName: 'Smalls', options: ['one', 'two', 'three'] },
  { groupName: 'Mediums', options: ['four', 'five', 'six'] },
  { groupName: 'Bigs', options: [
    { groupName: 'Fairly big', options: ['seven', 'eight', 'nine'] },
    { groupName: 'Really big', options: [ 'ten', 'eleven', 'twelve' ] },
    'thirteen'
  ] },
  'one hundred',
  'one thousand'
]