shadcn-ui/ui

Command is not working properly.

HamidShaikh1499 opened this issue · 5 comments

HamidShaikh1499 commented

Describe the bug

I can't use mouse to select an item from list(CommandList). I attached below video please see.

2024-05-07.10-44-22.mp4

Affected component/components

Command, CommandList and CommandItem

How to reproduce

i used code from https://github.com/shadcn-ui/ui/pull/2773. and also used different variant of multi select and also tried to modify but failed. due to commandList.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

No

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
HamidShaikh1499 commented

I found issue in className of CommadItem

previous one: "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",

Changed: "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"

I just removed: "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"

what is use of data-[disabled]:pointer-events-none data-[disabled]:opacity-50?

loiclefloch commented

Hello, the code you removed will make the item with an opacity of 50 when the item is marked as disabled.
I would suggest you to look at this on going pull request that is doing the right fix for this : #3680

  • 👍3
ABthewebdev commented

this man is a lifesaver thank you, I agree too this pr should be looked at

  • 👍3
HamidShaikh1499 commented

Okay, i got solution from that PR. Thanks @loiclefloch. So i am closing this one....

imxfrq commented

@ricardoraposo thankkkssss .. ui -> command.tsx -> [search] CommandPrimitive.Item -> [Copy Paste]
ClassName={cn(
"relative flex cursor-pointer 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 0"

  • 👍1