[Bug]: cmdk version 1.0.0 broken in Astro app

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

https://ui.shadcn.com

MIT License

74.11k stars 4.57k forks source link

[Bug]: cmdk version 1.0.0 broken in Astro app #3127

Closed desiboli closed 7 months ago

desiboli commented 7 months ago

Describe the bug

Using the latest cmdk component with cmdk version 1.0.0 is not working properly, the dialog opens as usual but you cannot select or hover an item.

Affected component/components

Command

How to reproduce

Setup new Astro project with shadcn ui and add the Command component.

Codesandbox/StackBlitz link

https://stackblitz.com/edit/withastro-astro-1dtsvr?file=src%2Fstyles%2Fglobals.css

Logs

No response

System Info

Before submitting

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

desiboli commented 7 months ago

Downgrading to "cmdk": "^0.2.1" works.

gustaveWPM commented 7 months ago

Same issue here!

Jamess-Lucass commented 7 months ago

Should be resolved by changing the disabled related classes within CommandItem

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

After: disabled:pointer-events-none disabled:opacity-50

Example.

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