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
73.57k stars 4.52k forks source link

[bug]: Sheet + Combobox #4300

Open cantemizyurek opened 3 months ago

cantemizyurek commented 3 months ago

Describe the bug

Combobox component inside Sheet doesn't work properly. You can't select Command Items.

Affected component/components

Sheet, Combobox, Command, Popover

How to reproduce

Use Combobox component inside Sheet.

Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-xublst?file=app%2Fpage.tsx

Logs

No response

System Info

Using Google Chrome

Before submitting

step2341 commented 3 months ago

i was having a similar problem with a dropdown in a dialog. you cant select the dropdown items when the dropdown in is in a modal. i did find though that if you set modal={true} instead of false it then works.

Shlok2927 commented 3 months ago

any updates?? I am having the same issue

sseagull commented 3 months ago

@cantemizyurek

Curious, if you open the Combobox and inspect the items, do they have disabled="false" and data-disabled="false" on them?

If yes, this is a css bug. Combobox ultimately uses CommandItem, which has the following tailwind classes

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

My guess is at some point the CommandItem didn't have disabled attributes at all when the item wasn't disabled. The most recent version however adds disabled|data-disabled in both true and false cases.

To fix locally switch CommandItem tailwind classes to

data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50
UnholyCucumber commented 3 months ago

@sseagull I tried your suggestion but it still doesn't work within a Dialog but works outside of one; can this have something to do with Dialog?

EDIT: this worked for me: comment

WWillByers commented 3 months ago

@cantemizyurek

Curious, if you open the Combobox and inspect the items, do they have disabled="false" and data-disabled="false" on them?

If yes, this is a css bug. Combobox ultimately uses CommandItem, which has the following tailwind classes

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

My guess is at some point the CommandItem didn't have disabled attributes at all when the item wasn't disabled. The most recent version however adds disabled|data-disabled in both true and false cases.

To fix locally switch CommandItem tailwind classes to

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

This worked for me on Dialog also