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
75.34k stars 4.72k forks source link

[bug]: Inconsistent Scrolling Behavior with Dialog and ScrollArea #5901

Open iamDyeus opened 4 days ago

iamDyeus commented 4 days ago

Describe the bug

When using a dialog containing a scroll area component, the expected behavior is that the scroll area should handle scrolling when the dialog is active. However, the following issues occur:

  1. The scroll area within the dialog does not respond to scroll interactions.
  2. In some cases, the background page (outside the dialog) scrolls instead.
  3. This behavior often disrupts the overall scroll functionality of the page, rendering it inconsistent.

This issue appears to occur specifically when combining Dialog and ScrollArea components, leading to broken scroll behavior for both the dialog and the page.

Affected component/components

Dialog, ScrollArea

How to reproduce

here's a quick v0 code for the same: https://v0.dev/chat/8TUcPpED3by?b=b_XFselDzUnJH

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Win11, Edge.
(Note: am explicitly using JSX with vite & not TSX)

Before submitting

quocbao238 commented 4 days ago

@iamDyeus. When you use scroll-area. In case vertical, just set height for this https://ui.shadcn.com/docs/components/scroll-area

 <ScrollArea className="h-[600px] flex-grow px-6 pb-6">