Open myogeshchavan97 opened 1 month ago
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}
/>
))
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.
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.
I've made a PR for this fix. Please review it.
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:
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
Before submitting