feat: adding multi-select component

[dinogit]

This PR creates a multi-select component from existing shadcn-ui components.

[vercel[bot]]

@dinogit is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2023 6:30am

[izakfilmalter]

Looking forward to this.

• Seems that clicking on the x on the badge toggles the menu closed

• The hover state on the badge on dark mode is the same color as the input causing them to disappear.

• Badge alignment within the input is off as well.

• Would be sick if backspace on empty input deleted

[shadcn]

This looks great. Adding it to the roadmap.

@izakfilmalter has some feedback if you have a chance to look at it.

[izakfilmalter]

@dinogit Looking a lot better. This interaction is still really awkward:

I would probably disable the deselection of items while the dropdown is closed.

[izakfilmalter]

Backspace to remove is really wonky. It needs to check if the input is empty:

[dinogit]

Hi @izakfilmalter, thank you for your time and feedback.

regarding the comment above, the update is that deselection is removed from the Badge and only available on the Close button when the dropdown is open. Close button in the Badge also apears and disapears when dropdown is open/closed.

Delete will remove badge if Search is not populated, othervise it will delete letters in search input.

Let me know what do you think

[nemanja-alloy]

For me this multi select has major bug.

Having multiple fields in form will cause deletion of multi select tags once you modify other input fileds.

Property is MultiSelect

Using backspace to edit email / username will delete each selected tag one by one on every Backspace hit.

This is inside Sheet component.

[SaadBazaz]

Just asking the community to see what they'd like...

Would you like an AutoComplete with Multiselect + FreeSolo capabilities in Shad, like the following?

https://github.com/shadcn-ui/ui/assets/51885228/208c247b-db59-49c0-a98c-af2c5c87c7f9

(You can test this out at https://app.listen.dev)

If yes, we can try making this generic enough to merge into shadcn mainnet. I think with some tweaks, it can be moulded to do whatever a user wants to within multiselect/freesolo/autocomplete as they want. Kinda like MUI's AutoComplete.

[simicvm]

I am getting the following Issue in Chrome when using the provided example multi-select-form.tsx.

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's for attribute references the correct id of a form field.

The issue is that <label> gets the for attribute, but none of the form elements get the matching id attribute (or any id attribute for that matter).

For example, on the Input component, both the <label> and <input> elements get the matching id and no issue is raised.

My website still works fine though and values are passed properly.

[shadcn]

fyi: we have two multi-select components that we're looking into: https://github.com/shadcn-ui/ui/pull/2773

[sersavan]

Hi everyone, Thank you for developing such a wonderful library—it's truly the best! In relation to this topic, I would like to share an example of a multi-select component that I've assembled using shadcn's components. I appreciate your feedback. https://shadcn-multi-select-component.vercel.app/