[CSelect] Allow multiple values

[darthf1]

"@coreui/coreui": "3.0.0",
"@coreui/icons": "1.0.1",
"@coreui/vue": "3.0.0",

In the docs, there's no prop available allowing for selecting multiple values in the CSelect component.

However, if I do provide the prop :multiple="true", it correctly renders a multi-select like the example from bootstrap-vue. I'm able to select multiple items and the rendering seems ok.

The only issue is with the :value.sync prop: it only returns string instead of string[]

[woothu]

The component is not prepared for supporting 'multiple' feature by design. We think that for multiselect it is better to use dedicated solutions (examples shown in PRO template). It is also very possible that we will create the CMultisect component in the feature.

For your case, you can use third argument - event, but do not pass it to the component, because it is not prepared to multiselect from 'value' prop. You can then get current values like this:

Array.from(e.target.selectedOptions)

[darthf1]

@woothu Thanks for the suggestion! Initially I though this was sufficient, however unfortunately an error is triggered when all options are deselected.

e.target.selectedOptions[0] is undefined

This line does not check if the first index is available.

Is it possible to check if the index exists (if any option is selected) and if not, just pass null as a value?

[woothu]

Now if multiple attr is passed, 'update:value' is not emmited, so users would not be confused with partially working event.

For your case use @input/@ change event on CSelect.

[darthf1]

Awesome. Thanks.