How do i set handleContainerOverflow in ModalManager to false

[Sojborg]

When a Dialog opens body overflow: hidden is set which makes the site/content behind "jump" to the right. Opening and closing just a few dialogs in a row make a bad ux.

In the code i can ModalManager by default set document.body.style to overflow: hidden:

https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Modal/ModalManager.js#L78

How do i set handleContainerOverflow = false so my Dialog doesn't set body style to overflow: hidden?

[oliviertassinari]

@Sojborg What do you think of #13922?

[joelvh]

I was just looking for the same thing, but for a different purpose.

import { ModalManager } from '@material-ui/core/Modal'

const modalManager = new ModalManager({ handleContainerOverflow: false })

...

<SwipeableDrawer
  ModalProps={{
    hideBackdrop: true,
    BackdropProps: {
      invisible: true
    },
    manager: modalManager
  }}
/>

That worked for me, but I'm not looking to achieve this with multiple (overlapping?) dialogs, just a side panel with a hidden backdrop.

I also assume that the default manager is a singleton managing all modals, so creating your own instance will only manage the modals that you assign it to, and in this case they would all not disable scrolling.

[joelvh]

Another note related to disabling the overflow option is that scrolling within the side panel causes the page to scroll once you hit the end of the scrollable content in the drawer.

I'm looking for a solution to re-enable the overflow handling only when scrolling inside my drawer, and then toggle overflow handling off when I want to scroll on the page next to the drawer.

Taking suggestions, thanks.

[joelvh]

OK, for completeness in terms of how I've accomplished toggling overflow on the body:

import { ModalManager } from '@material-ui/core/Modal'

const modalManager = new ModalManager({ handleContainerOverflow: false })

...

<SwipeableDrawer
  ModalProps={{
    hideBackdrop: true,
    BackdropProps: {
      invisible: true
    },
    manager: modalManager,
    onMouseOver: event => {
      modalManager.data[0].container.style.overflow = 'hidden'
    },
    onMouseOut: event => {
      modalManager.data[0].container.style.overflow = 'inherit'
    }
  }}
/>

Definitely a "hack", but isolated enough that it won't interfere with how other modals operate.

[oliviertassinari]

I also assume that the default manager is a singleton managing all modals, so creating your own instance will only manage the modals that you assign it to

@joelvh Yes, you are right. I don't understand the problem you are trying to solve. We want to keep the modalManager instance private, we are proposing a prop instead: #13922.