[bug]: combobox options are disabled by default

[myogeshchavan97]

Describe the bug

Even after installing the popover and command components that are required for combobox, the options from the combobox are not selectable.

I have used the default code from the documentation only. Here's the entire code for the reference:

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

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

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 default function App() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("");

  return (
    <div className="flex justify-center items-center h-screen">
      <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) => (
                <CommandList key={framework.value}>
                  <CommandItem
                    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>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Affected component/components

combobox

How to reproduce

Just use the default code of displaying combobox from the documentation

Codesandbox/StackBlitz link

https://stackblitz.com/edit/vitejs-vite-ir9wtr?file=tsconfig.json,vite.config.ts,src%2FApp.tsx&terminal=dev

Logs

No response

System Info

macOS Monterey, version 12.7.5

Before submitting

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

[yeonsubak]

Removing data-[disabled]:pointer-events-none data-[disabled]:opacity-50 from the className at line 120 in command.tsx partially fixes this issue, but it will disable the use of the data-disabled attribute. I'm wondering if this issue is caused by improperly handled (or dangling) data-disabled attribute.

// Line 113-125 in command.tsx

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground",
      className
    )}
    {...props}
  />
))

[yeonsubak]

I was able to replicate this issue from the most updated commit in the main brach (f170784) by updating cmdk's version to "1.0.0" which is the latest release version so far. Downgrading it to "0.2.0" temporarily fixes the issue.

I'm suspecting newly introduced disablePointerSelection?: boolean; prop in cmdk's components causes it.

[rafi-shaik]

I too faced the same issue and I found a way to fix this. Inside the command.jsx and in the Command Item just replace the data-[disabled]:pointer-events-none data-[disabled]:opacity-50 with data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50. And the combobox works as expected.

Basically this is a check only when the command item is disabled only then follow the condition. I think by default all the options are disabled.

[yeonsubak]

I've made a PR for this fix. Please review it.