search

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
68.46k stars 4.05k forks source link

[bug]: Command Items fail to receive pointer events even when not disabled #4192

Open ceptoplex opened 2 months ago

ceptoplex commented 2 months ago

Describe the bug

With the recent changes coming in from #4181, the CSS classes specified for CommandPrimitive.Item have changed: https://github.com/shadcn-ui/ui/blob/c8ad3c26d267d3d1e052d0d4899c0af28967fd31/apps/www/registry/default/ui/command.tsx#L120

The problematic change is going from

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

to

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

which is not picked up correctly for me in Chrome Version 126.0.6478.127 (arm64) on MacOS. I haven't looked through the rest of the PR but the name suggests it focuses on Charts, so seeing such changes included to the Command, I think there is a risk of similar changes/issues in other parts as well.

Affected component/components

Command (i.e., Command, Combobox, etc.)

How to reproduce

  1. Include any Command demo (e.g. Command, Combobox), and do not disable Command Items

Expected: Command Items should be selectable with a cursor Actual: Command Items items are always greyed out and no longer selectable with a cursor

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Google Chrome 126.0.6478.127 (arm64)
macOS 14.5

Before submitting

aaronfulkerson commented 1 month ago

Having the same issue.

freakyflow commented 1 month ago

Having the same issue. Reverting this change helps. I don't think it's a chrome problem though because chrome handles this as expected: data-[disabled=true]: only triggers when disabled is set to true data-[disabled]: triggers if disabled is set to any value

For some reason the intention was to just check if the data-disabled attribute is set at all, ignoring its value.

jqjjian commented 1 month ago

I don't know why I modified the corresponding class according to the appeal method to work normally.

Mecil9 commented 1 month ago

i have the same issue. when use command components like this way: image web page response: disable components, mouse hover isn't work.

image

remove ui/command.tsx code: "data-[disabled]:pointer-events-none data-[disabled]:opacity-50" it's working!

image

dependencies list: "tailwindcss": "^3.4.1", "cmdk": "^1.0.0", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-toast": "^1.2.1",