[bug]: ComboBox item scroll (Mouse wheel) is not working inside Dialoge Box

[manishoctal]

Describe the bug

ComboBox item scroll (Mouse wheel) is not working inside Dialoge Box

https://github.com/user-attachments/assets/da1a3ce8-a543-4de5-a9b4-4eb19ac36246

Affected component/components

Combobox, Dialog

How to reproduce

1. Click on Filter
2. Click on Combobox
3. Scroll inside the combobox for more items, mouse scroll wheel not working.

https://github.com/user-attachments/assets/38e3781a-b5e8-4979-9c94-56d1820e9911

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Chrom, Windows 11

Before submitting

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

[confidential-nt]

Description

Upon investigation, the combo box and Dialog are rendered as sibling elements under the body tag due to the use of React’s Portal. While React maintains the parent-child relationship, the actual HTML structure differs. The combo box’s container is currently set to body, causing scrolling issues within the Dialog.

To resolve this, the combo box’s container is now configurable, allowing it to be rendered within the Dialog instead of directly under the body, ensuring proper scrolling behavior.

However, there are a few points I’d like to discuss with the maintainer. I would appreciate it if you could review and provide feedback.

PR

#4780

Result

Before

https://github.com/user-attachments/assets/e19c2ca2-9164-4641-9f67-3d041e8a2948

After

https://github.com/user-attachments/assets/8ceb9847-746c-4900-a55b-9d9affa2345b

[bon10]

@manishoctal

Have you tried this solution? https://github.com/shadcn-ui/ui/issues/3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

[joshuarobs]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

Adding modal={true} to Popover worked for me

[jurmadani]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

worked for me too

[Earnstein]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

this worked perfectly... Bless you

[Rodrigues-Joao]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

worked for me too

[fiqriachmada]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

This is work for me too

[eswar-7116]

Thank you! I've been searching for a solution for quite some time, and this implementation worked for me.

[cgensheimer]

This is great, thank you for the fix.

[phalla-doll]

Wow, I really should have scrolled through this thread instead of spending half my life debugging code that wasn’t even broken. Next time, I’ll let the thread do the heavy lifting, and save myself a few gray hairs.

[MejanH]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

may the creator bless you. Thanks.

[Aszurar]

@manishoctal

Have you tried this solution? #3959

I had a similar problem but solved it by adding modal={true} only to the Popover component.

<Popover modal={true} onOpenChange={setOpen} open={open}>
  xxxx
</Popover>

@confidential-nt Your PR is nice for solving this issue 👍 But in fact, the Select component is the same and is generated as a sibling element under the body tag when it is used under the Dialog. I mean, we have to solve the behavior of both Select and Popover I think.

:Note that: Select scrolling works correctly without modal={true} 🫤

thanks i was trying a many things, reinstalling components, resetting css...i spent hours in this because i had others project with the same context and works fine, but the last happened this... and it was something so simple, thank you