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('', () => { ); 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( + + {Array.from(Array(ITEM_COUNT).keys()).map((item) => ( +
+ {item} +
+ ))} +
, + ); + 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', () => {