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))