ui [Bug]: Combobox component error: Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Describe the bug

i am having the below error when i try to use Combobox component from shadcn-ui library, note that i have directly copy the code from there docs. The error happens when i click on the combobox. i am using the below versions:

    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-table": "^8.12.0",
    "axios": "^1.6.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^1.0.0",
    "date-fns": "^3.3.1",
    "dompurify": "^3.0.9",
    "lucide-react": "^0.340.0",
    "react": "^18.2.0",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.50.1",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.22.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/dompurify": "^3.0.5",
    "@types/node": "^20.11.20",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }

the error

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=958c08d1:173:18)
    at U2 (cmdk.js?v=958c08d1:139:13)
    at cmdk.js?v=958c08d1:99:34
    at cmdk.js?v=958c08d1:367:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=958c08d1:367:15
    at commitHookEffectListMount (chunk-IIEKGORF.js?v=958c08d1:16904:34)
    at commitLayoutEffectOnFiber (chunk-IIEKGORF.js?v=958c08d1:16992:23)
    at commitLayoutMountEffects_complete (chunk-IIEKGORF.js?v=958c08d1:17976:17)
A @ cmdk.js?v=958c08d1:173
U2 @ cmdk.js?v=958c08d1:139
(anonymous) @ cmdk.js?v=958c08d1:99
(anonymous) @ cmdk.js?v=958c08d1:367
(anonymous) @ cmdk.js?v=958c08d1:367
commitHookEffectListMount @ chunk-IIEKGORF.js?v=958c08d1:16904
commitLayoutEffectOnFiber @ chunk-IIEKGORF.js?v=958c08d1:16992
commitLayoutMountEffects_complete @ chunk-IIEKGORF.js?v=958c08d1:17976
commitLayoutEffects_begin @ chunk-IIEKGORF.js?v=958c08d1:17965
commitLayoutEffects @ chunk-IIEKGORF.js?v=958c08d1:17916
commitRootImpl @ chunk-IIEKGORF.js?v=958c08d1:19349
commitRoot @ chunk-IIEKGORF.js?v=958c08d1:19273
performSyncWorkOnRoot @ chunk-IIEKGORF.js?v=958c08d1:18891
flushSyncCallbacks @ chunk-IIEKGORF.js?v=958c08d1:9135
(anonymous) @ chunk-IIEKGORF.js?v=958c08d1:18623
Show 15 more frames
Show less
chunk-IIEKGORF.js?v=958c08d1:16659 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=958c08d1:173:18)
    at U2 (cmdk.js?v=958c08d1:139:13)
    at cmdk.js?v=958c08d1:99:34
    at cmdk.js?v=958c08d1:367:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=958c08d1:367:15
    at commitHookEffectListMount (chunk-IIEKGORF.js?v=958c08d1:16904:34)
    at invokeLayoutEffectMountInDEV (chunk-IIEKGORF.js?v=958c08d1:18295:19)
    at invokeEffectsInDev (chunk-IIEKGORF.js?v=958c08d1:19697:19)
A @ cmdk.js?v=958c08d1:173
U2 @ cmdk.js?v=958c08d1:139
(anonymous) @ cmdk.js?v=958c08d1:99
(anonymous) @ cmdk.js?v=958c08d1:367
(anonymous) @ cmdk.js?v=958c08d1:367
commitHookEffectListMount @ chunk-IIEKGORF.js?v=958c08d1:16904
invokeLayoutEffectMountInDEV @ chunk-IIEKGORF.js?v=958c08d1:18295
invokeEffectsInDev @ chunk-IIEKGORF.js?v=958c08d1:19697
commitDoubleInvokeEffectsInDEV @ chunk-IIEKGORF.js?v=958c08d1:19680
flushPassiveEffectsImpl @ chunk-IIEKGORF.js?v=958c08d1:19499
flushPassiveEffects @ chunk-IIEKGORF.js?v=958c08d1:19443
commitRootImpl @ chunk-IIEKGORF.js?v=958c08d1:19412
commitRoot @ chunk-IIEKGORF.js?v=958c08d1:19273
performSyncWorkOnRoot @ chunk-IIEKGORF.js?v=958c08d1:18891
flushSyncCallbacks @ chunk-IIEKGORF.js?v=958c08d1:9135
(anonymous) @ chunk-IIEKGORF.js?v=958c08d1:18623
Show 16 more frames
Show less
react-router-dom.js?v=958c08d1:3479 Error handled by React Router default ErrorBoundary: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=958c08d1:173:18)
    at U2 (cmdk.js?v=958c08d1:139:13)
    at cmdk.js?v=958c08d1:99:34
    at cmdk.js?v=958c08d1:367:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=958c08d1:367:15
    at commitHookEffectListMount (chunk-IIEKGORF.js?v=958c08d1:16904:34)
    at invokeLayoutEffectMountInDEV (chunk-IIEKGORF.js?v=958c08d1:18295:19)
    at invokeEffectsInDev (chunk-IIEKGORF.js?v=958c08d1:19697:19)

Affected component/components

Combobox

How to reproduce

1, create a new project using vite, just be sure to use the versions below i mention 2, add the combobox component and any other components that depend on it. 3, and copy paste the code from the docs and run your application

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Operating System: Windows 10
Browser: Chrome
Node.js Version (if applicable): v20.9.0
React Version: ^18.2.0,
React Router Version: 6.22.1

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

Mar 11 '24 09:03 aynuayex

This seems to come from the library called cmdk cause when i fallback to older version ^0.2.0 it works with out problem, the newer version ^1.0.0. The Comobox component uses that library. Any fixes @pacocoursey, thanks in advance.

Mar 11 '24 10:03 aynuayex

In the v.1 release notes https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0 Rendering the Command.List part (CommandList if using shadcn) is now mandatory.

So you need to add the CommandList beneath the Command component in your usecase to work @aynuayex

Mar 11 '24 10:03 k1eu

Thanks, but there are also other breaking change such as can't select the items and all the available items are grayed out ,hover and other styles not working , so the Combobox component should be updated to reflect the changes

Mar 11 '24 11:03 aynuayex

@aynuayex yes, here's the thread with the issues already open: https://github.com/shadcn-ui/ui/issues/2944, and the fixes needed - so maybe we can link to that and close this one :D

Mar 11 '24 12:03 k1eu

yes, please read issue #2944 https://github.com/shadcn-ui/ui/issues/2944 as @k1eu https://github.com/k1eu mentioned on the issue i created.

On Tue, 26 Mar 2024 at 03:33, Sholuade Olamide @.***> wrote:

Thanks, but there are also other breaking change such as can't select the items and all the available items are grayed out ,hover and other styles not working , so the Combobox component should be updated to reflect the changes

@aynuayex https://github.com/aynuayex did you find a workaround the items selection and all other stylings?

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/2980#issuecomment-2020069413, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2UUHBCL32PCADWS4NW63UTY2FFJDAVCNFSM6AAAAABEP6N552VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRQGA3DSNBRGM . You are receiving this because you were mentioned.Message ID: @.***>

Mar 26 '24 12:03 aynuayex

I just had to modify the cmdk to an older version of ^0.2.1 and it worked perfectly well.

Mar 27 '24 14:03 dialite

Wrapping CommandList around CommandItem(s) worked for me.

<CommandGroup>
  <CommandList>
    {options.map((option) => (
      <CommandItem
        key={option.value}
        value={option.value}
        onSelect={(currentValue) => {
          setValue(currentValue === value ? "" : currentValue);
          setOpen(false);
          onSelect(currentValue);
        }}
      >
        <CheckCircledIcon
          className={cn(
            "mr-2 h-4 w-4",
            value === option.value ? "opacity-100" : "opacity-0"
          )}
        />
        {option.label}
      </CommandItem>
    ))}
  </CommandList>
</CommandGroup>

Mar 29 '24 03:03 LogicalOgbonna

Is this issue fixed ? I got the same issue in NextJs project.

Mar 29 '24 12:03 Gimhan001

Is this issue fixed ? I got the same issue in NextJs project.

Did you try the fix above your comment, should fix your issue. The docs haven't been updated yet. Might be worth putting in a pull request if no one has already.

Mar 30 '24 23:03 EggsLeggs

Is this issue fixed ? I got the same issue in NextJs project.

Did you try the fix above your comment, should fix your issue. The docs haven't been updated yet. Might be worth putting in a pull request if no one has already.

Wrapping the items inside CommandGroup in CommandList fixes the issue, but creates other issue, all the items get greyed out and unclickable:

This is the code I am using:

<CommandGroup>
  <CommandList>
    {frameworks.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>
    ))}
  </CommandList>
</CommandGroup>

Apr 01 '24 01:04 danilo-css

@danilo-css @Gimhan001 Since You guys are very bored to read the issue that i have mentioned to solve the grayed out problem of the list items displayed, i will generalize the answer here once and for all the time.so here is the code that prevents the above error from happening:

<Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size={"sm"}
          role="combobox"
          aria-expanded={open}
          aria-label="Select Department"
          className="w-[200px] justify-between dark:text-white"
        >
          <FcDepartment className="mr-2 hidden lg:block" />
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select department"}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 hidden lg:block" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search department..." />
          <CommandList>
            <CommandEmpty>No department found.</CommandEmpty>
            <CommandGroup>
              {frameworks.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>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>

so, warping the CommandItem with CommandList or as in the docs warp CommandGroup including CommandEmpty with CommandList.

to solve the list items being grayed out, open Command component by going to components/ui/command.tsx and look for const CommandItem and replace every data-[disabled] with data-[disabled='true'] in the className prop.Now you are good to go! This is because, in cmdk changenotes: The aria-disabled and aria-selected props will now be set to false by default, instead of being undefined.

Apr 01 '24 06:04 aynuayex

@aynuayex Here is my code:

<Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          aria-label="Select Department"
        >
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select department"}
          <AppIcon
            src="/svg/chevron-down.svg#id"
            className="ml-2 hidden h-4 w-4 shrink-0 opacity-50 lg:block"
          />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search department..." />
          <CommandList>
            <CommandEmpty>No department found.</CommandEmpty>
            <CommandGroup>
              {frameworks.map((framework) => (
                <CommandItem
                  key={framework.value}
                  value={framework.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue);
                    setOpen(false);
                  }}
                >
                  {framework.label}

                  <AppIcon src="/svg/check.svg#id" />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>

And it still not working as well. Can't click the item

Apr 03 '24 05:04 tranduybau

@tranduybau please read this(it is the comment just above your comment at the end of it.

Apr 03 '24 05:04 aynuayex

@tranduybau please read this(it is the comment just above your comment at the end of it.

Turn out the problems is millions, I used your code but it didnt hot reload. I re-run the web and it's all good, Thank you mate :D Have a good day.

Apr 03 '24 06:04 tranduybau

I got this problem after using your code @aynuayex

Apr 03 '24 12:04 Priyanshu85

@Priyanshu85 sorry for the late reply and the error.it is caused because of my implementation in my code, i add className since i have addtional classNames to style the combobox i.e, i have made the combobox(the above code) a component and passing additional styles. so,in your case just remove , className or totally change the className prop with className="w-[200px] justify-between dark:text-white" or review the above code i have updated it.

Apr 03 '24 15:04 aynuayex

Hi @aynuayex , today I faced another issue is can't scroll when the content is too long, Have you ever seen that before?

Apr 04 '24 04:04 tranduybau

@aynuayex 🤝 Your solution worked for me. 4 hours of hysteria were wasted before your magical message.

Apr 09 '24 10:04 MaxsaDev

to solve the list items being grayed out, open Command component by going to components/ui/command.tsx and look for const CommandItem and replace every data-[disabled] with data-[disabled='true'] in the className prop.Now you are good to go!

It works fine! Just do not forget about this detail.

Apr 09 '24 17:04 tsybko22

Wrapping CommandList around CommandItem(s) worked for me.

<CommandGroup>
  <CommandList>
    {options.map((option) => (
      <CommandItem
        key={option.value}
        value={option.value}
        onSelect={(currentValue) => {
          setValue(currentValue === value ? "" : currentValue);
          setOpen(false);
          onSelect(currentValue);
        }}
      >
        <CheckCircledIcon
          className={cn(
            "mr-2 h-4 w-4",
            value === option.value ? "opacity-100" : "opacity-0"
          )}
        />
        {option.label}
      </CommandItem>
    ))}
  </CommandList>
</CommandGroup>

Best option!thank you!

Apr 09 '24 19:04 ode96-dev

@danilo-css @Gimhan001 Since You guys are very bored to read the issue that i have mentioned to solve the grayed out problem of the list items displayed, i will generalize the answer here once and for all the time.so here is the code that prevents the above error from happening:
<Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size={"sm"}
          role="combobox"
          aria-expanded={open}
          aria-label="Select Department"
          className="w-[200px] justify-between dark:text-white"
        >
          <FcDepartment className="mr-2 hidden lg:block" />
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select department"}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 hidden lg:block" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search department..." />
          <CommandList>
            <CommandEmpty>No department found.</CommandEmpty>
            <CommandGroup>
              {frameworks.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>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
so, warping the CommandItem with CommandList or as in the docs warp CommandGroup including CommandEmpty with CommandList.

to solve the list items being grayed out, open Command component by going to components/ui/command.tsx and look for const CommandItem and replace every data-[disabled] with data-[disabled='true'] in the className prop.Now you are good to go! This is because, in cmdk changenotes: The aria-disabled and aria-selected props will now be set to false by default, instead of being undefined.

tanks this work

Apr 12 '24 10:04 BienvenidoBoriko

Hi @aynuayex , today I faced another issue is can't scroll when the content is too long, Have you ever seen that before?

No, I haven't, mine works fine when the content is too long. what version are you using?

Apr 13 '24 12:04 aynuayex

he issue came from the modal. Didnt have the props modal={true}. Resolved :D

Apr 13 '24 13:04 tranduybau

In the v.1 release notes https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0 Rendering the Command.List part (CommandList if using shadcn) is now mandatory.

So you need to add the CommandList beneath the Command component in your usecase to work @aynuayex

Thanks for helping !! This solution worked for me.

Apr 14 '24 05:04 tier3guy

use lower version of "cmdk": "^1.0.0" ====> "cmdk": "^0.2.0 "

Apr 19 '24 11:04 idaix

Hi @aynuayex , today I faced another issue is can't scroll when the content is too long, Have you ever seen that before?

Try using the Scroll Area component as stated here.

Apr 19 '24 21:04 IMXEren

I just had to modify the cmdk to an older version of ^0.2.1 and it worked perfectly well.

yep, me too :)

Apr 24 '24 07:04 chamals3n4

@danilo-css @Gimhan001 Since You guys are very bored to read the issue that i have mentioned to solve the grayed out problem of the list items displayed, i will generalize the answer here once and for all the time.so here is the code that prevents the above error from happening:
<Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size={"sm"}
          role="combobox"
          aria-expanded={open}
          aria-label="Select Department"
          className="w-[200px] justify-between dark:text-white"
        >
          <FcDepartment className="mr-2 hidden lg:block" />
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select department"}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 hidden lg:block" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search department..." />
          <CommandList>
            <CommandEmpty>No department found.</CommandEmpty>
            <CommandGroup>
              {frameworks.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>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
so, warping the CommandItem with CommandList or as in the docs warp CommandGroup including CommandEmpty with CommandList.

to solve the list items being grayed out, open Command component by going to components/ui/command.tsx and look for const CommandItem and replace every data-[disabled] with data-[disabled='true'] in the className prop.Now you are good to go! This is because, in cmdk changenotes: The aria-disabled and aria-selected props will now be set to false by default, instead of being undefined.

works but it is expected behaviour I cannot click on anything and it only works with the key enter?

Apr 30 '24 11:04 FrancescoSaverioZuppichini

@FrancescoSaverioZuppichini please read this at the end of the comment or the below and let me know if there is anything new

to solve the list items being grayed out, open Command component by going to components/ui/command.tsx and look for const CommandItem and replace every data-[disabled] with data-[disabled='true'] in the className prop.Now you are good to go! This is because, in cmdk changenotes: The aria-disabled and aria-selected props will now be set to false by default, instead of being undefined.

Apr 30 '24 13:04 aynuayex

It looks like also the className on the Command component itself (for those using shadcdn.ui that the part that's the <CommandPrimitive.Item /> needs some updates, see https://github.com/shadcn-ui/ui/issues/3637#issuecomment-2088978580

May 03 '24 01:05 waldothedeveloper

ui ui copied to clipboard

[Bug]: Combobox component error: Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Describe the bug

Affected component/components

How to reproduce

Codesandbox/StackBlitz link

Logs

System Info

Before submitting

ui
ui copied to clipboard