Shadcn combobox disabled even though I have not intentionally done it

Question

I am creating a custom combobox using Shadcn, and passing data as a prop parameter. It's working, but an issue arises when I am getting the list. The list is disabled and I am not able to select any value.

Shadcn reference : https://ui.shadcn.com/docs/components/combobox

import React, { useState } from "react";
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

interface Option {
    value: string;
    label: React.ReactNode;
}

interface Props {
    data: Option[];
    onSelect: (selectedValue: string) => void;
}

function Combobox({ data = [], onSelect }: Props) {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState("");

    const handleSelect = (selectedValue: string) => {
        setValue(selectedValue);
        setOpen(false);
        onSelect(selectedValue);
    };

    console.log("Combobox rendered", data, value, open);

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className="w-full justify-between"
                >
                    {value ? data.find((item) => item.value === value)?.label : "Select..."}
                    <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0">
                <Command>
                    <CommandInput placeholder="Search..." className="h-9" />
                    <CommandList

                    >
                        <CommandEmpty>No item found.</CommandEmpty>
                        <CommandGroup heading="Options">
                            {data.map((item) => (
                                <CommandItem
                                    key={item.value}
                                    onSelect={() => handleSelect(item.value)}
                                    // className={cn("flex items-center", {
                                    //     "bg-primary-50": item.value === value,
                                    //     "cursor-not-allowed opacity-50": item.value === value,
                                    // })}
                                    disabled={item.value === value}
                                >
                                    {item.label}
                                    <CheckIcon
                                        className={cn(
                                            "ml-auto h-4 w-4",
                                            value === item.value ? "opacity-100" : "opacity-0"
                                        )}
                                    />
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
}

export default Combobox;

I tried removing commandList but then I was getting error undefined not iterable. I am confused, can anyone help me out here.

Answer 1

cmdk@1 came with bracking changes

You have two options:

1. downgrade cmdk to 0.x version

Run

npm install [email protected]
# or
pnpm add [email protected]

Or

2. replace data-[disabled]: with data-[disabled=true]: in components/ui/command.tsx

For your information, there is another breaking change in v1.x.x

<CommandList> is now required. You have to wrap all <CommandItem> with it or you'll get a strange error like:

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Answer 2

This is the problem in shadcn combobox, basically shadcn is using cmdk v1.x.x behind the box, the issue is which is discussed in shadcn github issue is that, for no reason the CommandItem component has attribute data-disabled which should change to data-disabled="true", this in particular will fix the problem.

All thanks to AdiRishi, in github issues that his full answer is available here, you should simply go to your @/components/ui/command.jsx or @/components/ui/command.tsx and edit CommandItem component as below:

for js:

const CommandItem = React.forwardRef(({ 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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
      className
    )}
    {...props} />
))

for typescript:

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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
      className
    )}
    {...props}
  />
));

This would fix the problem of shadcn combobox component.