ui [bug]: Disabled state styles in Command

Describe the bug

I think there is a problem with the disabled styles in Command component, probably because Radix and cmdk uses different ways to use the data-disabled HTML attribute. In CommandPrimitive.Item the default styles for this attribute is:

data-[disabled]:pointer-events-none data-[disabled]:opacity-50

That only works if the component either uses the attribute or not, but not for data-disabled="true" or data-disabled="false".

2 solutions:

Change default styles to data-[disabled="true"]:pointer-events-none data-[disabled="true"]:opacity-50
Change tw config

config = { theme: { extend: { data: { disabled: 'disabled~="true"', }, } } }

It's just a minor issue but the disabled pointer renders the component useless for me until I changed it. Great job on the library by the way 😀

Affected component/components

Command

How to reproduce

Use Command component.
Try to click on the dropdown and see that the cursor is disabled.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Versions: 
  "cmdk": "^1.0.0"

Before submitting

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

Mar 29 '24 13:03 romoguill

I decided to use "cmdk": "^0.2.0" to get around this issue. Using the previous version fixes the disabled item issue.

Mar 29 '24 18:03 rajatkumar

I am also having the same issue in command Item.

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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  />
))

This is the default Code.

I have removed this data-[disabled]:pointer-events-none data-[disabled]:opacity-50

And now it works

Based on description, it appears that removing the data-[disabled]:pointer-events-none data-[disabled]:opacity-50 attributes resolves the issue. But I think its not the right way.

I have provided images and code to the problem for visualization and better understanding.