From efc1396baffa2059126f15e1b49d92495c0b398f Mon Sep 17 00:00:00 2001
From: Ritesh Biswas <lusebiswas@gmail.com>
Date: Sat, 7 Sep 2024 13:24:38 +0530
Subject: [PATCH] [material-ui][Dialog] Fix broken scrolling in full screen
 mode (#43626)

Signed-off-by: Diego Andai <diego@mui.com>
Co-authored-by: Diego Andai <diego@mui.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/Dialog/Dialog.js    |  1 +
 .../mui-material/src/Dialog/Dialog.test.js    | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 0bea089324fe5d..53a04076dc6adc 100644
--- 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
index a0eb5c3d8ee823..dd954f5b4f0b27 100644
--- 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', () => {