[bug]: Chadcn/UI Combobox code doesn't work at all

[factor3]

Describe the bug

I have been attempting to use the Combobox provided at: https://ui.shadcn.com/docs/components/combobox

I have tried several versions of the Combobox, only to discover that they all fail in different ways!

My first attempt was to use the code under the "Usage" section. Folks should be aware that there is a typo in that code. The tag is missing a "/" in its closing tag.

Once I corrected the Command closing tag, I ran the page. It displayed with no problems, but for some reason I cannot select any of the items in its list. They do not change color when the mouse moves over them, and they aren't electe when they are clicked. It is almost as if they are all disabled.

I next tried to use some of the Comboboxes in the Examples section. After installing the @radix-ui/react-icons (instruction of the installation of which would have been good if included with the installation instructions), I ran the Combobox. It worked well enough until I clicked on it. It disappeared.

Running it while monitoring a console, I am seeing that the component is crashing for the following reason:

`Uncaught TypeError: items is undefined

A index.mjs:1
U2 index.mjs:1
item index.mjs:1
Me index.mjs:1
Me index.mjs:1
React 13
useCallbackRef useCallbackRef.tsx:15
setValue useControllableState.tsx:27
onOpenToggle Popover.tsx:82
handleEvent primitive.tsx:10
React 23
<anonymous> main.tsx:6

` This "item" is not anywhere in the component. It is obviously missing from one of the dependencies.

Affected component/components

Combobox

How to reproduce

1. Copy the shadcn Combox code and write it into a file in the Vite project
2. Place the Combobox's tag into the App.tsx file
3. Run the application
4. Attempt to use the Combobox.

Codesandbox/StackBlitz link

https://stackblitz.com/edit/vitejs-vite-8ucaux?file=index.html&terminal=dev

Logs

No response

System Info

Problem occurs on all major browsers

Before submitting

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

[EthanL06]

Found this reddit thread that fixed the problem of not being able to select the items in the Combobox.

I had to change the CSS of the CommandItem component from:

  <CommandPrimitive.Item
    className={cn(
      "relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}  />

to

  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default 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
    )}  />

[prajanyasoft-prabin]

When we encapsulate the CommandGroup within a CommandList, we observe that the click and on-select behaviors are not functioning as expected.

[factor3]

Ethan06:

I checked the code for CommandPrimitive.Item in my copy of Command.tsx.

The code there is below: ` <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]:pointer-events-none data-[disabled]:opacity-50",
  className
)}
{...props}

/> `

I do not believe that adding the ref line will fix this problem now, because that line is already there.

[EthanL06]

Ethan06:

I checked the code for CommandPrimitive.Item in my copy of Command.tsx.

The code there is below: ` <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]:pointer-events-none data-[disabled]:opacity-50",
  className
)}
{...props}

/> `

I do not believe that adding the ref line will fix this problem now, because that line is already there.

There are some changes in the CSS that also make it work, not necessarily just the ref.

[factor3]

Ethan06:

I did place the CSS line into the CommandPrimitive.Item tag, and the Combobox does work now.

I believe, therefore, that this bug can be fixed by:

1. Putting the CSS that you suggested into the official codebase
2. Correcting the typo on the Command closing tag in their Usage section, changing it from:

<Command> to </Command>

This is just a suggestion to those who maintain shadcn/UI... `

[nickzelei]

This most likely has to do with the cmdk@1.0.0 change to the aria-selectors css.

https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

Update [aria-disabled] and [aria-selected] CSS selectors https://github.com/pacocoursey/cmdk/commit/c57e6b7f81a5796395c7a016d6b1b2aac9591973
The aria-disabled and aria-selected props will now be set to false, instead of being undefined. If you previously used CSS selectors based on attribute presence, you will now need to use the attribute value.

/* Before */
[aria-disabled] {}
:not([aria-disabled]) {}

/* After */
[aria-disabled="true"] {}
[aria-disabled="false"] {}