Open factor3 opened 1 month ago
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
)} />
When we encapsulate the CommandGroup within a CommandList, we observe that the click and on-select behaviors are not functioning as expected.
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.
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.
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:
<Command>
to
</Command>
This is just a suggestion to those who maintain shadcn/UI... `
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"] {}
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
` This "item" is not anywhere in the component. It is obviously missing from one of the dependencies.
Affected component/components
Combobox
How to reproduce
Codesandbox/StackBlitz link
https://stackblitz.com/edit/vitejs-vite-8ucaux?file=index.html&terminal=dev
Logs
No response
System Info
Before submitting