[bug]: ComboBox component not working in Shadcn Website

[MilanPraz]

Describe the bug

Application error: a client-side exception has occurred (see the browser console for more information).

Affected component/components

Combobox

How to reproduce

Goto shadcn then click on combobox

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows 11

Before submitting

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

[JoeyKhd]

+1 on this also copying the example results in the same error that is being thrown on the website

[JoeyKhd]

pnpm i cmdk@^0.2.1

should solve your issue

[EvanBarnesAZ]

There was a breaking change made to cmdk: https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

I solved the issue in the source code on the docs by wrapping all of the CommandItem(s) in a CommandList.

So the source code in the docs looks like this:

"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

export function ComboboxDemo() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[200px] justify-between"
        >
          {value
            ? frameworks.find((framework) => framework.value === value)?.label
            : "Select framework..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search framework..." />
          <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>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

You need to now do the following:

<CommandGroup>
   <CommandList> // ADDING COMMAND LIST HERE FOR FIX
            {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>
            ))}
   </CommandList>
</CommandGroup>

[EvanBarnesAZ]

Unfortunately, this introduces another bug, where all of the items are now disabled.

To fix this, you also need to go into command.tsx in your ui components, and change the CSS selector in the className of CommandItem:

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

[Rekl0w]

I submitted a PR about it.

[smith558]

clicking on component crashes the site

Screencast from 2024-06-07 17-05-53.webm

[inmoh7]

I also encountered the same issue in '/examples/playground' component where there's a 'ComboBox' with the text 'Load a preset...'. I found out the issue is on the 'CommandItem' component. There is an issue opened regarding this.

[inmoh7]

I also encountered the same issue in '/examples/playground' component where there's a 'ComboBox' with the text 'Load a preset...'. I found out the issue is on the 'CommandItem' component. There is an issue opened regarding this.

Made a fix PR for this: https://github.com/shadcn-ui/ui/pull/3956