Implementing the Multi-Select feature in the Select component

[onmax]

Introduction

I am proposing the integration of a multi-select feature into the Select component to improve user interaction and choice selection. Before proceeding, I would like to gain consensus on this proposed feature.

Feature Description

The essence of this proposal is to enable the selection of multiple options within the Select component, mirroring the functionality available in the Headless/UI's ListBox component.

References

• Headless/UI's ListBox component

Challenges and solutions

1. Type modelling:

   • Accurately typing the model can be a challenge. However, this hurdle can be mitigated by using the newly released generics feature in Vue 3, which supports accurate typing at the component level.
   • Read more about Vue 3 generics.
   • There is uncertainty about the impact on users running lower versions of Vue 3. This needs further investigation to ensure backwards compatibility.

2. Accessibility

• There may be some unforeseen accessibility issues that need to be addressed to ensure the feature is fully accessible.

Request for feedback

I invite feedback, suggestions and potential concerns regarding this proposal. Your input will help refine the proposed feature to better meet the needs of users while maintaining optimal functionality and accessibility.

[zernonia]

Im thinking about creating ListBox component, and keep Select as in (perhaps adding deprecated sign). The reason is that the Select componet by Radix UI doesn't really extends well due to it's item-aligned mode.

Moving code to ListBox should be quite easy, as it is popper mode for Select, and we can extends it by having multiple prop, and support for object modelValue.

[sadeghbarati]

@onmax here the Zernonia implementation

https://stackblitz.com/edit/ehczfb