[material-ui][Dialog] Fix broken scrolling in full screen mode (#43626)

Signed-off-by: Diego Andai <[email protected]> Co-authored-by: Diego Andai <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Sep 7, 2024 · efc1396 · efc1396
1 parent fc65397
commit efc1396
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
@@ -118,6 +118,7 @@ const DialogPaper = styled(Paper, {
   memoTheme(({ theme }) => ({
     margin: 32,
     position: 'relative',
+    overflowY: 'auto',
     '@media print': {
       overflowY: 'visible',
       boxShadow: 'none',

diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -318,6 +318,35 @@ describe('<Dialog />', () => {
       );
       expect(getByTestId('paper')).not.to.have.class(classes.paperFullScreen);
     });
+
+    it('scrolls if overflown on the Y axis', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const ITEM_HEIGHT = 100;
+      const ITEM_COUNT = 10;
+
+      const { getByTestId } = render(
+        <Dialog
+          open
+          fullScreen
+          PaperProps={{ 'data-testid': 'paper', sx: { height: ITEM_HEIGHT } }}
+        >
+          {Array.from(Array(ITEM_COUNT).keys()).map((item) => (
+            <div key={item} style={{ flexShrink: 0, height: ITEM_HEIGHT }}>
+              {item}
+            </div>
+          ))}
+        </Dialog>,
+      );
+      const paperElement = getByTestId('paper');
+      expect(paperElement.scrollTop).to.equal(0);
+      expect(paperElement.clientHeight).to.equal(ITEM_HEIGHT);
+      expect(paperElement.scrollHeight).to.equal(ITEM_HEIGHT * ITEM_COUNT);
+      fireEvent.scroll(paperElement, { target: { scrollTop: ITEM_HEIGHT } });
+      expect(paperElement.scrollTop).to.equal(ITEM_HEIGHT);
+    });
   });
 
   describe('prop: PaperProps.className', () => {