I can't use the combobox

[ocodista]

I followed the instructions of the docs, added popover and command and tries to use combobox.

Whenever I click on "Select a framework", the application fails.

index.mjs:1 Uncaught TypeError: Cannot read properties of undefined (reading 'subscribe')
    at T (webpack-internal:///(app-client)/../../node_modules/cmdk/dist/index.mjs:18:10971)
    at eval (webpack-internal:///(app-client)/../../node_modules/cmdk/dist/index.mjs:18:7415)
    at renderWithHooks (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10649:18)
    at updateForwardRef (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14689:20)
    at beginWork$1 (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17381:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19449:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19498:16)
    at invokeGuardedCallback (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19573:29)
    at beginWork (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25694:7)
    at performUnitOfWork (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24523:12)
    at workLoopSync (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24239:5)
    at renderRootSync (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24204:7)
    at performSyncWorkOnRoot (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23699:20)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9966:13)
    at flushSyncWorkOnAllRoots (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:9924:3)
    at processRootScheduleInMicrotask (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10068:3)
    at eval (webpack-internal:///(app-client)/../../node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10239:7)

[sotatek-vuong]

have you checked the import?, i faced the similar error because I imported Command from lucide-react

[shrikantkalar023]

I am facing the same Issue.

[atjeff]

Yes, it is most certainly caused by importing from the wrong place. I found this setting which helps a lot:

"typescript.preferences.autoImportFileExcludePatterns": ["lucide-react"]

I wonder how it can be configured to also exclude everything @radix-ui/react-* besides the @radix-ui/react-icons

[akmaldira]

lucide-react

same here LOL

i'm so confuse bcs of this before

[shakibhasan09]

@sotatek-vuong lol same thing here :)

[krachtstefan]

I stumbled upon the same issue and I indeed imported from lucide-react. Should we close this issue @ocodista?

[doriandevelops]

have you checked the import?, i faced the similar error because I imported Command from lucide-react

Wow I was experiencing a similar issue with the Combobox and it was the import! Thanks!

[rafaelcanto]

lol. Same error here.

[alamenai]

@shadcn , this issue should be closed because the solution as @sotatek-vuong mentioned is importing Command from ui/command instead of lucide-react.

[vidhanshu]

have you checked the import?, i faced the similar error because I imported Command from lucide-react

This solved the error! 😂

[tomavanc]

Combobox stopped working with a same kind of error. Imports are correct.

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Okay, found it. Package cmdk had a breaking change (v1.0.0) Follow the update instructions here: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

[vmewada01]

i am unable to select the options in combo box

[tanayvaswani]

@tomavanc Would love to know if you've any working example for this? I've added CommandList, just want to see a good example using CSS Selectors

[lukdev371]

i am unable to select the options in combo box

It appears that changing the CSS selector in the CommandItem className solves the problem: Before: ...data-[disabled]:pointer-events-none data-[disabled]:opacity-50 After: ... data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50

[vmewada01]

@tomavanc Would love to know if you've any working example for this? I've added CommandList, just want to see a good example using CSS Selectors

 <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[200px] justify-between"
        >
          {value
            ? NewsLists.find((framework) => framework.value === value)
                ?.label || "Unknown"
            : "Select Channel..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search news..." />
          <CommandEmpty>No framework found.</CommandEmpty>
          <CommandGroup>
            {NewsLists.length > 0 &&
              NewsLists?.map((news) => (
                <CommandItem>{news.label}</CommandItem>
              ))}
            {/* {NewsLists?.map((framework) => (
              <CommandItem
                key={framework.value}
                value={framework.value}
                onSelect={(currentValue) => {
                  setValue(currentValue === value ? "" : currentValue);
                  setOpen(false);
                }}
              >
                <Check
                  className={cn(
                    "mr-2 h-4 w-4",
                    value === framework.value ? "opacity-100" : "opacity-0"
                  )}
                />
                {framework.label}
              </CommandItem>
            ))} */}
            {/* <CommandItem>abp</CommandItem>
            <CommandItem>aajtak</CommandItem>
            <CommandItem>news24</CommandItem>
            <CommandItem>Indiatv</CommandItem>
            <CommandItem>newsadda</CommandItem> */}
          </CommandGroup>
        </Command>
      </PopoverContent>
    </Popover>
    
    tried all the approaches but still the value is disabled
    
    "use client";

import { type DialogProps } from "@radix-ui/react-dialog"; import { Command as CommandPrimitive } from "cmdk"; import { Search } from "lucide-react"; import * as React from "react";

import { Dialog, DialogContent } from "@/components/ui/dialog"; import { cn } from "@/lib/utils";

const Command = React.forwardRef< React.ElementRef<typeof CommandPrimitive>, React.ComponentPropsWithoutRef<typeof CommandPrimitive>

(({ className, ...props }, ref) => ( <CommandPrimitive ref={ref} className={cn( "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className )} {...props} /> )); Command.displayName = CommandPrimitive.displayName;

interface CommandDialogProps extends DialogProps {}

const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( <Dialog {...props}> <DialogContent className="overflow-hidden p-0 shadow-lg"> <Command className="[&[cmdk-group-heading]]:px-2 [&[cmdk-group-heading]]:font-medium [&[cmdk-group-heading]]:text-muted-foreground [&[cmdk-group]:not([hidden])~[cmdk-group]]:pt-0 [&[cmdk-group]]:px-2 [&[cmdk-input-wrapper]svg]:h-5 [&[cmdk-input-wrapper]svg]:w-5 [&[cmdk-input]]:h-12 [&[cmdk-item]]:px-2 [&[cmdk-item]]:py-3 [&[cmdk-item]svg]:h-5 [&[cmdk-item]_svg]:w-5"> {children} </Command> </DialogContent> </Dialog> ); };

const CommandInput = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Input>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>

(({ className, ...props }, ref) => (

));

CommandInput.displayName = CommandPrimitive.Input.displayName;

const CommandList = React.forwardRef< React.ElementRef<typeof CommandPrimitive.List>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>

(({ className, ...props }, ref) => ( <CommandPrimitive.List ref={ref} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} {...props} /> ));

CommandList.displayName = CommandPrimitive.List.displayName;

const CommandEmpty = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Empty>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>

((props, ref) => ( <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} /> ));

CommandEmpty.displayName = CommandPrimitive.Empty.displayName;

const CommandGroup = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Group>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>

(({ className, ...props }, ref) => ( <CommandPrimitive.Group ref={ref} className={cn( "overflow-hidden p-1 text-foreground [&[cmdk-group-heading]]:px-2 [&[cmdk-group-heading]]:py-1.5 [&[cmdk-group-heading]]:text-xs [&[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className )} {...props} /> ));

CommandGroup.displayName = CommandPrimitive.Group.displayName;

const CommandSeparator = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>

(({ className, ...props }, ref) => ( <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} /> )); CommandSeparator.displayName = CommandPrimitive.Separator.displayName;

const CommandItem = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>

(({ className, ...props }, ref) => ( <CommandPrimitive.Item ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className )} {...props} /> ));

[vmewada01]

unable to select the value in combo box after fixing the bug

{value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."} No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {framework.label} ))}

[lukdev371]

unable to select the value in combo box after fixing the bug

{value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."} No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {framework.label} ))}

The CommandItem is disabled because of the [aria-disabled] CSS Selector in the className. As I mentioned earlier, I had the same issue. The disabled state is set to true due to the breaking changes in cmdk version 1.0.0 (https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0)

Change:

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
/>
));

to

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className
)}
{...props}
/>
));

at least that is, what helped me for this issue

[tanayvaswani]

@lukdev371 Thanks buddy!

[SwetanshuSingh]

I am getting this error whenever I am trying to use combo-box, I have followed all installation steps

[Alwaz]

Combobox stopped working with a same kind of error. Imports are correct.

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Okay, found it. Package cmdk had a breaking change (v1.0.0) Follow the update instructions here: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

Thanks you saved me.

[Muntasir2001]

https://github.com/shadcn-ui/ui/issues/2980#issuecomment-2029267475

this solution helped me

[Suman-JS]

unable to select the value in combo box after fixing the bug {value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."} No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {framework.label} ))}

The CommandItem is disabled because of the [aria-disabled] CSS Selector in the className. As I mentioned earlier, I had the same issue. The disabled state is set to true due to the breaking changes in cmdk version 1.0.0 (https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0)

Change:

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
/>
));

to

(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className
)}
{...props}
/>
));

at least that is, what helped me for this issue

Thank you so such man. I was thinking that, "Maybe, I did something wrong."

[harsh472000]

To fix error at MultiSelect component, please downgrade version of "cmdk" with the command "npm install [email protected]". Thank you

[Balick]

I have this error with the combobox

[kisstamasj]

I have this error with the combobox

do waht @harsh472000 mentioned, downgrade the cmdk to 0.2.1 version. Of course should work with the current version, but now not, if you want to use the combobox, just downgrade.

[miekassu]

I have this error with the combobox

Using cmdk version 1.0.0, you need to wrap ur <CommandGroup> component to <CommandList>, e.g.:

                    <FormField
                      control={form.control}
                      name="city"
                      render={({ field }) => (
                        <FormItem className="flex flex-col">
                          <FormLabel>City</FormLabel>
                          <Popover>
                            <PopoverTrigger asChild>
                              <FormControl>
                                <Button
                                  variant="outline"
                                  role="combobox"
                                  className={cn(
                                    'w-[200px] justify-between',
                                    !field.value && 'text-muted-foreground',
                                  )}
                                >
                                  {field.value
                                    ? cities.find((city) => city.name === field.value)?.name
                                    : 'Select city'}
                                  <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                                </Button>
                              </FormControl>
                            </PopoverTrigger>
                            <PopoverContent className="w-[200px] p-0">
                              <Command>
                                <CommandInput placeholder="Search city..." />
                                <CommandEmpty>No city found</CommandEmpty>
                                <CommandList className="max-h-[200px] overflow-y-scroll">
                                  <CommandGroup>
                                    {cities.map((city) => (
                                      <CommandItem
                                        value={city.name}
                                        key={city.id}
                                        onSelect={() => {
                                          form.setValue('city', city.name)
                                        }}
                                      >
                                        <Check
                                          className={cn(
                                            'mr-2 h-4 w-4',
                                            city.name === field.value ? 'opacity-100' : 'opacity-0',
                                          )}
                                        />
                                        {city.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                </CommandList>
                              </Command>
                            </PopoverContent>
                          </Popover>
                          <FormMessage />
                        </FormItem>

[kisstamasj]

I have this error with the combobox

Using cmdk version 1.0.0, you need to wrap ur <CommandGroup> component to <CommandList>, e.g.:

                    <FormField
                      control={form.control}
                      name="city"
                      render={({ field }) => (
                        <FormItem className="flex flex-col">
                          <FormLabel>City</FormLabel>
                          <Popover>
                            <PopoverTrigger asChild>
                              <FormControl>
                                <Button
                                  variant="outline"
                                  role="combobox"
                                  className={cn(
                                    'w-[200px] justify-between',
                                    !field.value && 'text-muted-foreground',
                                  )}
                                >
                                  {field.value
                                    ? cities.find((city) => city.name === field.value)?.name
                                    : 'Select city'}
                                  <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
                                </Button>
                              </FormControl>
                            </PopoverTrigger>
                            <PopoverContent className="w-[200px] p-0">
                              <Command>
                                <CommandInput placeholder="Search city..." />
                                <CommandEmpty>No city found</CommandEmpty>
                                <CommandList className="max-h-[200px] overflow-y-scroll">
                                  <CommandGroup>
                                    {cities.map((city) => (
                                      <CommandItem
                                        value={city.name}
                                        key={city.id}
                                        onSelect={() => {
                                          form.setValue('city', city.name)
                                        }}
                                      >
                                        <Check
                                          className={cn(
                                            'mr-2 h-4 w-4',
                                            city.name === field.value ? 'opacity-100' : 'opacity-0',
                                          )}
                                        />
                                        {city.name}
                                      </CommandItem>
                                    ))}
                                  </CommandGroup>
                                </CommandList>
                              </Command>
                            </PopoverContent>
                          </Popover>
                          <FormMessage />
                        </FormItem>

Its working :) I had a problem after i tried this solution. Every element in the combobox was disabled. This mistake was in the shadcn command.tsx component in line 120.

It says put pointer-events-none and opacity-50 classes on the CommandItem component when it has a disabled attributum even if it is false. And in default it has disabled=false, so it will be disabled. I modified this component like this:

After that works perfectly.

[vienpt]

I have use and install the latest version of shadcn/ui combobox. This one worked for me https://github.com/shadcn-ui/ui/issues/2944#issuecomment-2151796269

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[HansiDerSweater]

For all who havent found the solution. I tried everything mentioned here but it didnt worked. I deleted node_modules & package-lock.json and did npm install. After that it worked.