[bug]: Combo Box TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

[AslamJM]

Describe the bug

I copy pasted the sample combo box code in my react app the popover trigger appear. when click open this error occurred in the console.

Affected component/components

Command Combobox

How to reproduce

1. install popover and command
2. copy paste the sample code on the website

Codesandbox/StackBlitz link

No response

Logs

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
The above error occurred in the <ForwardRef> component:

System Info

Chrome

Before submitting

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

[AslamJM]

This is a problem with command group of cmdk library. The command list component seems to work fine

[reckek]

In the example, you need to add the value and onValueChange properties to the <Command /> component.

See more details here: https://github.com/pacocoursey/cmdk?tab=readme-ov-file#command-cmdk-root

[verdverm]

@reckek I do not believe this is the core issue, but I do believe the issue is upstream

Using this cmdk example: https://github.com/pacocoursey/cmdk?tab=readme-ov-file#use-inside-popover

You can reproduce this error by swapping List for Group

[verdverm]

Opened an issue upstream https://github.com/pacocoursey/cmdk/issues/284

[abdullahhosenakash]

I found that the problem was with the cmdk package version 1.0.0. So I removed the package using npm r cmdk and then reinstalled a lower version using npm i cmdk@^0.2.1 and it worked Alhamdulillah (all praise to Allah).

[Kelvin274]

Hi, I have been trying to find information about the error I have, but it seems to be something... strange. When I click on the combobox, Popover try to display and the following error is generated:

FormField component (copy of Form example):

<FormField
    control={control}
    name='nationality'
    render={({ field }) => (
      <FormItem className='flex flex-col'>
        <FormLabel>Nationality</FormLabel>
        <Popover>
          <PopoverTrigger asChild>
            <FormControl>
              <Button
                variant='outline'
                role='combobox'
                className={cn(
                  'w-full justify-between',
                  !(field.value && field.value.nationality) &&
                    'text-muted-foreground'
                )}
                disabled={!nationalities}
              >
                {field.value && field.value.nationality
                  ? nationalities?.find(
                      (nationality) =>
                        nationality.nationality ===
                        field.value.nationality
                    )?.nationality
                  : 'Select an option'}
                <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
              </Button>
            </FormControl>
          </PopoverTrigger>
          <PopoverContent className='p-0'>
            <Command>
              <CommandInput placeholder='Search Nationality...' />
              <CommandList>
                <CommandEmpty>
                  Not found.
                </CommandEmpty>
                <CommandGroup>
                  {nationalities?.map(
                    (nationality) => (
                      <CommandItem
                        value={nationality.nationality}
                        key={nationality.id}
                        onSelect={(value) =>
                          console.log('Selected', value) //Test
                        }
                      >
                        <Check
                          className={cn(
                            'mr-2 h-4 w-4',
                            nationality.nationality ===
                              field.value.nationality
                              ? 'opacity-100'
                              : 'opacity-0'
                          )}
                        />
                        {nationality.nationality}
                      </CommandItem>
                    )
                  )}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
        <FormMessage />
      </FormItem>
    )}
/>

And this is the CommandItem component:

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 data-[disabled="true"]:pointer-events-none data-[selected="true"]:bg-accent data-[selected="true"]:text-accent-foreground data-[disabled="true"]:opacity-50',
      className
    )}
    {...props}
  />
))

The version of cmdk is 1.0.0

Any suggest how to fix 'o' prop type?

[anaclumos]

@Kelvin274 I am having the same issue, trying to fix it

[anaclumos]

@Kelvin274 Strangely, if I separate the file into an isolated combo-box.tsx component, the error goes away.