[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

• [X] I've made research efforts and searched the documentation
• [X] 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.

[luchillo17]

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)

@KhoeLe I think step 1 is not necessary anymore, it's funny the disabled class thingy was fixed but not the CommandList requirement...