search

pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.03k stars 258 forks source link

Disabled options with shadcn implementation on 1.0.0 #245

Closed jatinahluwalia closed 2 months ago

jatinahluwalia commented 3 months ago

The options are greyed out and disabled (onSelect doesn't get called on mouse click) when using with version 1.0.0. However, everything fine on 0.2.0

sipos-david commented 3 months ago

Hey @jatinahluwalia, this is becase 1.0.0 ads data-disabled=false with well aria-disabled (source https://github.com/pacocoursey/cmdk/commit/c57e6b7f81a5796395c7a016d6b1b2aac9591973), however shadcn relies on the old behavior in the css:

data-[disabled]:pointer-events-none data-[disabled]:opacity-50 To fix this change the attribute selectors to: data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50

You need to do this in the CommandItem shadcn component, by default this is located in components/ui/command.tsx or you can follow the 2nd solution in https://github.com/shadcn-ui/ui/issues/3256

There are multiple issues on this in shadcn so you can wait for them to fix it and use 0.2.1 for the time being.