[bug]: Doc error - the examples in the ComboBox section do not work - they are missing the CommandList element

[noam-honig]

Describe the bug

I've tried the code examples from https://ui.shadcn.com/docs/components/combobox and they didn't work.

I investigated and I think that the samples are missing a CommandList element

 <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search framework..." />
          <CommandList> {/* <---- this is missing ---->*/}
          <CommandEmpty>No framework 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> {/* <---- this is missing ---->*/}
        </Command>
      </PopoverContent>

Version:
"cmdk": "^1.0.0",
"lucide-react": "^0.373.0",

Here's the error I got:
Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from ()
at A (index.mjs:1:3990)
at U2 (index.mjs:1:3003)
at index.mjs:1:1763
at index.mjs:1:10381
at Map.forEach ()
at index.mjs:1:10370
at commitHookEffectListMount (react-dom.development.js:23150:26)
at commitLayoutEffectOnFiber (react-dom.development.js:23268:17)
at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)

Affected component/components

ComboBox

How to reproduce

Create a fresh project based on the https://ui.shadcn.com/docs/installation/vite
Add the combo box to it
Click on the combo
See the error

Or open:
https://stackblitz.com/github/noam-honig/shadcn-combobox-docs-bug
Click on the combo
See the error

Codesandbox/StackBlitz link

https://stackblitz.com/github/noam-honig/shadcn-combobox-docs-bug

Logs

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (index.mjs:1:3990)
    at U2 (index.mjs:1:3003)
    at index.mjs:1:1763
    at index.mjs:1:10381
    at Map.forEach (<anonymous>)
    at index.mjs:1:10370
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)

System Info

Windows, Chrome

Before submitting

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

[ynikitiuk]

The problem is that shadcn installs latest version of dependencies, and there was a recent major release of cmdk

You also need to update classes for CommandItem from data-[disabled]:pointer-events-none data-[disabled]:opacity-50 to data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50, otherwise all options are disabled

[shahzaib-ai]

I am experiencing the same issue, as of now, removing cmdk v1.0.0 and using cmdk v0.2.1 makes it work. I think it would be nice if shadcn installed dependencies for the version they tested with, that might solve issues like this from occuring again.

[waldothedeveloper]

Does anybody knows when this will be fixed in the docs?

[khanhhuy130295]

I had the same problem with the sample

[mrlexz]

i got the same issue

[KhoeLe]

Your solution is as follows:

Step 01:

• Navigate to the file components/ui/command.tsx and update the classes for CommandItem from data-[disabled]:pointer-events-none data-[disabled]:opacity-50 to data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50. This change ensures that all options are disabled.
  (Note: Referring to the comment from @ynikitiuk)

Step 02:

• In the ComboboxDemo component, add CommandList as the parent of CommandGroup to resolve the issues:

        <Command>
          <CommandInput placeholder="Search framework..." />
          <CommandEmpty>No framework found.</CommandEmpty>
          <CommandList>
          <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>

This should resolve the issues.