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

@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.

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

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>

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>

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

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.

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

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

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!

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

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

@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 😄 Have a good day.