feat: adding multi-select component #1616

dinogit · 2023-09-27T21:28:02Z

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

vercel · 2023-09-27T21:28:05Z

@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 · 2023-10-21T11:51:14Z

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 · 2023-10-21T12:48:45Z

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 · 2023-10-21T12:49:51Z

This looks great. Adding it to the roadmap.

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

apps/www/registry/default/ui/multi-select.tsx

Co-authored-by: Izak Filmalter <[email protected]>

izakfilmalter · 2023-10-23T11:24:47Z

@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 · 2023-10-23T11:27:14Z

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

dinogit · 2023-10-23T19:59:28Z

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 · 2023-11-28T10:54:14Z

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.

nemanja-alloy · 2023-11-28T11:03:00Z

apps/www/registry/default/ui/multi-select.tsx

+          <Command className={className}>
+            <CommandInput
+              onValueChange={(item) => {
+                console.log("dd", item)


Remove console.log

jonatan-kruse · 2023-12-03T17:16:36Z

apps/www/registry/default/ui/multi-select.tsx

+export type OptionType = Record<"value" | "label", string>
+
+interface MultiSelectProps {
+  options: Record<"value" | "label", string>[]


Why not use the OptionType here that is defined just above?

jonatan-kruse · 2023-12-03T22:21:08Z

apps/www/registry/default/ui/multi-select.tsx

+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Backspace" && query === "" && selected.length > 0) {
+          onChange(selected.filter((_, index) => index !== selected.length - 1))
+        }


This backspace act as soon as the component is loaded it should not remove an item if I am using backspace to remove text in another input field

This should do the trick (works for me)

Suggested change

React.useEffect(() => {

const handleKeyDown = (e: KeyboardEvent) => {

if (e.key === "Backspace" && query === "" && selected.length > 0) {

onChange(selected.filter((_, index) => index !== selected.length - 1))

}

React.useEffect(() => {

const handleKeyDown = (e: KeyboardEvent) => {

if (document.activeElement === commandInputRef.current) {

if (e.key === 'Backspace' && query === '' && selected.length > 0) {

onChange(selected.filter((_, index) => index !== selected.length - 1));

}

}

Plus declaring commandInputRef

const commandInputRef = React.useRef<HTMLInputElement>(null);

and adding ref={commandInputRef}

<CommandInput ref={commandInputRef} onValueChange={(item) => { setQuery(item); }} placeholder="Search ..." />

jonatan-kruse · 2023-12-03T22:25:27Z

apps/www/registry/default/ui/multi-select.tsx

+                  {item.label}
+                  {open && (
+                    <Button
+                      asChild


I don't know why but this asChild crashed my website with this error message:

Uncaught Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only] (react.development.js:1229:11) at Slot.tsx:70:62 at renderWithHooks (react-dom.development.js:16305:18) at updateForwardRef (react-dom.development.js:19226:20) ...

jonatan-kruse · 2023-12-03T22:28:35Z

apps/www/registry/default/ui/multi-select.tsx

+            role="combobox"
+            aria-expanded={open}
+            className={`group w-full justify-between ${
+              selected.length > 1 ? "h-full" : "h-10"


This resulted in quite a buggy ui for me, i would sugest

min-h-[2.5rem] h-fit

SaadBazaz · 2023-12-05T19:09:55Z

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

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

Screen.Recording.2023-12-06.at.00.08.03.mov

(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 · 2023-12-29T14:43:29Z

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.

grayashh · 2024-02-05T04:54:25Z

apps/www/registry/default/ui/multi-select.tsx

+                      variant="outline"
+                      size="icon"
+                      className={`border-none duration-300 ${
+                        open ? "opacity-100 ease-in" : "opacity-0 ease-out"


Unnecessary conditional, open value is always truthy
because button only visible when open is true

Suggested change

open ? "opacity-100 ease-in" : "opacity-0 ease-out"

opacity-100 ease-in

shadcn · 2024-03-04T05:19:47Z

fyi: we have two multi-select components that we're looking into: #2773

sersavan · 2024-04-12T21:45:25Z

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/

jvPalma-anchorage · 2024-07-15T19:11:47Z

apps/www/registry/default/ui/multi-select.tsx

+                        ? selected.filter((item) => item.value !== option.value)
+                        : [...selected, option]
+                    )
+                    setOpen(true)


set it to open?
if you are clicking it, the popover is already open and visible, am i missing something?

jvPalma-anchorage · 2024-07-15T19:12:42Z

apps/www/registry/new-york/ui/multi-select.tsx

+          <Command className={className}>
+            <CommandInput
+              onValueChange={(item) => {
+                console.log("dd", item)


remove console.log

sovetski · 2024-12-23T15:00:24Z

Any updates please? a lot of developer are waiting for this..

feat: adding multi-select component

5c2d2e2

dinogit and others added 2 commits September 28, 2023 09:25

Merge branch 'main' into feature/multi-select

5fc8a5b

Merge branch 'main' into feature/multi-select

4e4de07

vercel bot deployed to Preview – ui October 21, 2023 11:55 View deployment

shadcn added new component area: roadmap This looks great. We'll add it to the roadmap, review and merge. postpone: more info or changes requested maintainers asked a question or needs more info labels Oct 21, 2023

izakfilmalter reviewed Oct 21, 2023

View reviewed changes

apps/www/registry/default/ui/multi-select.tsx Outdated Show resolved Hide resolved

apps/www/registry/default/ui/multi-select.tsx Outdated Show resolved Hide resolved

dinogit and others added 3 commits October 21, 2023 19:15

Merge branch 'main' into feature/multi-select

534791a

Update apps/www/registry/default/ui/multi-select.tsx

ba51002

Co-authored-by: Izak Filmalter <[email protected]>

feat(multiselect): suggestion update

23cb1d1

dinogit requested a review from izakfilmalter October 22, 2023 16:36

vercel bot deployed to Preview – ui October 23, 2023 06:30 View deployment

feat(multiselect): format write

ff24025

feat(multiselect): updating deselection

ed49a4f

shadcn and others added 2 commits October 24, 2023 21:04

Merge branch 'main' into feature/multi-select

3cd8a93

feat: adding multi-select component

3a411c1

shin-hama mentioned this pull request Oct 25, 2023

tag の候補を表示する shin-hama/web-highlighter#28

Open

fix(multiselect): update mdx

1551b11

nemanja-alloy reviewed Nov 28, 2023

View reviewed changes

jonatan-kruse reviewed Dec 3, 2023

View reviewed changes

grayashh reviewed Feb 5, 2024

View reviewed changes

yeliex mentioned this pull request Feb 18, 2024

feat: add multi-select component #2773

Open

jvPalma-anchorage reviewed Jul 15, 2024

View reviewed changes

ilbertt mentioned this pull request Dec 17, 2024

Multi select ? #66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adding multi-select component #1616

feat: adding multi-select component #1616

dinogit commented Sep 27, 2023

vercel bot commented Sep 27, 2023

vercel bot commented Oct 21, 2023 •

edited

Loading

izakfilmalter commented Oct 21, 2023

shadcn commented Oct 21, 2023

izakfilmalter commented Oct 23, 2023

izakfilmalter commented Oct 23, 2023

dinogit commented Oct 23, 2023

nemanja-alloy commented Nov 28, 2023 •

edited

Loading

nemanja-alloy Nov 28, 2023

jonatan-kruse Dec 3, 2023

jonatan-kruse Dec 3, 2023

simicvm Dec 29, 2023

jonatan-kruse Dec 3, 2023 •

edited

Loading

jonatan-kruse Dec 3, 2023

SaadBazaz commented Dec 5, 2023 •

edited

Loading

simicvm commented Dec 29, 2023

grayashh Feb 5, 2024

shadcn commented Mar 4, 2024

sersavan commented Apr 12, 2024

jvPalma-anchorage Jul 15, 2024

jvPalma-anchorage Jul 15, 2024

sovetski commented Dec 23, 2024

	open ? "opacity-100 ease-in" : "opacity-0 ease-out"
	opacity-100 ease-in

feat: adding multi-select component #1616

Are you sure you want to change the base?

feat: adding multi-select component #1616

Conversation

dinogit commented Sep 27, 2023

vercel bot commented Sep 27, 2023

vercel bot commented Oct 21, 2023 • edited Loading

izakfilmalter commented Oct 21, 2023

shadcn commented Oct 21, 2023

izakfilmalter commented Oct 23, 2023

izakfilmalter commented Oct 23, 2023

dinogit commented Oct 23, 2023

nemanja-alloy commented Nov 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonatan-kruse Dec 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SaadBazaz commented Dec 5, 2023 • edited Loading

simicvm commented Dec 29, 2023

Choose a reason for hiding this comment

shadcn commented Mar 4, 2024

sersavan commented Apr 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sovetski commented Dec 23, 2024

vercel bot commented Oct 21, 2023 •

edited

Loading

nemanja-alloy commented Nov 28, 2023 •

edited

Loading

jonatan-kruse Dec 3, 2023 •

edited

Loading

SaadBazaz commented Dec 5, 2023 •

edited

Loading