[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
fromdata-[disabled]:pointer-events-none data-[disabled]:opacity-50
todata-[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 ofCommandGroup
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>