shadcn-ui/ui

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

noam-honig opened this issue · 6 comments

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

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

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.

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

I had the same problem with the sample

i got the same issue

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