Next.js Discord

Discord Forum

Shadcn's Combobox do not rendering clickable items with <CommandGroup> component.

Answered
Huann Almeida posted this in #help-forum
Open in Discord
Avatar
Huann AlmeidaOP
Hi everyone!

I'm encountering an issue with rendering a clickable list within a combobox. When I utilize the <CommandList> component, it successfully renders the list of items but they aren't clickable.

However, when I attempt to follow the shadcn instructions by using <CommandGroup>, I encounter the following error: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))".

Here's the code snippet where I'm facing the issue:
<PopoverContent>
  <Command>
    <CommandInput placeholder="Selecione uma Imobiliária"/>
    <CommandEmpty>Nenhuma imobiliária encontrada</CommandEmpty>
    <CommandGroup>
      {realStateList.map((realState) => (
        <CommandItem
          key={realState.value}
          value={realState.value}
          onSelect={(currentValue: string) => {
            setRealStateValue(currentValue === realStateValue ? "" : currentValue)
            setOpen(false)
          }}
        >
          {realState.label}
        </CommandItem>
      ))}
    </CommandGroup>
  </Command>
</PopoverContent>


And here's the code where the list renders but isn't clickable:
<PopoverContent>
  <Command>
    <CommandInput placeholder="Selecione uma Imobiliária"/>
    <CommandEmpty>Nenhuma imobiliária encontrada</CommandEmpty>
    <CommandGroup>
      <CommandList>
        {realStateList.map((realState) => (
          <CommandItem
            key={realState.value}
            value={realState.value}
            onSelect={(currentValue: string) => {
              setRealStateValue(currentValue === realStateValue ? "" : currentValue)
              setOpen(false)
            }}
          >
            {realState.label}
          </CommandItem>
        ))}
      </CommandList>
    </CommandGroup>
  </Command>
</PopoverContent>

Any insights on resolving this would be greatly appreciated!
Answered by Dayo
hey

i encountered this same issue a couple of weeks ago. turns out the shadcn combobox is currently broken.

the cmdk package on top which shadcn's combobox is built on had a breaking change and broke some stuff - https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

to get it working, you need to make 2 slight updates

1. you need to wrap the <CommandItem /> component with <CommandList /> (make sure to import both from '@/components/ui/command'

if you stop here, you'll no longer see the error, however, you won't be able to select anything.

2. go inside shadcn's command component and update this part of the CommandItem's styling

from:

data-[disabled]:pointer-events-none data-[disabled]:opacity-50

to:

data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50

that should fix it.

goodluck!

here's a discussion on GitHub that helped me narrow down the issue - https://github.com/shadcn-ui/ui/issues/809.
View full answer

7 Replies

Avatar
Arboreal ant
What's the 'realStateList'? Where do you define it?

It could be that realStateList is undefined (as hinted at in the error message, undefined is not iterable - so realStateList.map makes me thing realStateList might be undefined)
Avatar
@Huann Almeida Hi everyone! I'm encountering an issue with rendering a clickable list within a combobox. When I utilize the `<CommandList>` component, it successfully renders the list of items but they aren't clickable. However, when I attempt to follow the shadcn instructions by using `<CommandGroup>`, I encounter the following error: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))". Here's the code snippet where I'm facing the issue: typescript <PopoverContent> <Command> <CommandInput placeholder="Selecione uma Imobiliária"/> <CommandEmpty>Nenhuma imobiliária encontrada</CommandEmpty> <CommandGroup> {realStateList.map((realState) => ( <CommandItem key={realState.value} value={realState.value} onSelect={(currentValue: string) => { setRealStateValue(currentValue === realStateValue ? "" : currentValue) setOpen(false) }} > {realState.label} </CommandItem> ))} </CommandGroup> </Command> </PopoverContent> And here's the code where the list renders but isn't clickable: typescript <PopoverContent> <Command> <CommandInput placeholder="Selecione uma Imobiliária"/> <CommandEmpty>Nenhuma imobiliária encontrada</CommandEmpty> <CommandGroup> <CommandList> {realStateList.map((realState) => ( <CommandItem key={realState.value} value={realState.value} onSelect={(currentValue: string) => { setRealStateValue(currentValue === realStateValue ? "" : currentValue) setOpen(false) }} > {realState.label} </CommandItem> ))} </CommandList> </CommandGroup> </Command> </PopoverContent> Any insights on resolving this would be greatly appreciated!
Avatar
Dayo
hey

i encountered this same issue a couple of weeks ago. turns out the shadcn combobox is currently broken.

the cmdk package on top which shadcn's combobox is built on had a breaking change and broke some stuff - https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

to get it working, you need to make 2 slight updates

1. you need to wrap the <CommandItem /> component with <CommandList /> (make sure to import both from '@/components/ui/command'

if you stop here, you'll no longer see the error, however, you won't be able to select anything.

2. go inside shadcn's command component and update this part of the CommandItem's styling

from:

data-[disabled]:pointer-events-none data-[disabled]:opacity-50

to:

data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50

that should fix it.

goodluck!

here's a discussion on GitHub that helped me narrow down the issue - https://github.com/shadcn-ui/ui/issues/809.
Answer
Avatar
Dayo
I've also made a repo on GitHub so you can see exactly what needs to be done - https://github.com/dayoawobeku/shadcn-combobox
Avatar
@Arboreal ant What's the 'realStateList'? Where do you define it? It could be that realStateList is undefined (as hinted at in the error message, undefined is not iterable - so realStateList.map makes me thing realStateList might be undefined)
Avatar
Huann AlmeidaOP
ReasStateList is a exported array in an other file. But the list information is rendered outside of <CommandItem>. I thought that was the problem,