[Bug]: Command/Combobox TypeError and Unclickable/Disabled items, cmdk breaking change

[blackhatcobol]

Describe the bug

Why I faced Disabled items with no reason ?

Affected component/components

Command, combobox, CommandItem

How to reproduce

Right click on The component <CommanItem>, chose: Go to Definition F12, then: Go to the Component tailwind styling, then: Remove the following classes from the className 👍🏻 : "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", or change the [disabled] data to [true] 🥇 Congrats ! You solved your issue.

Codesandbox/StackBlitz link

please add a reproduction

Logs

nothing

System Info

nothing

Before submitting

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

[muhammedalibilgin]

i also encountered same bug when i use combobox. "data-[disabled]:pointer-events-none" this class added "opacity:50%" and "pointer-events: none" with no reason.

[Rehan-shah]

fix is removing data-[disabled]:pointer-events-none and data-[disabled]:opacity-50 class . Should work now

[ademhatay]

@Rehan-shah Yes, that works.

[AdiRishi]

FYI the fix is simply to target the data-disabled="true" state rather than just the presence of data-disabled which is what the current CSS is doing.

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

As per the cmdk release, they now specify true/false instead of leaving it undefined. See - https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

Just update the CommandItem tailwind line to this

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

[ApacheEx]

I'd simply replace data-[disabled] to aria-disabled which handles true/false already like aria-selected

[tonnoz]

omg thank you!