Material-ui: [Dialog] Side effects (body overflow hidden property)

Created on 20 Jun 2015 · 3Comments · Source: mui-org/material-ui

I would like to suggest a following change,

The Dialog component sets the <body> style as overflow: hidden;. And on dismiss, this style rule is dismissed.

But if the component is removed from DOM while Dialog was being shown, it renders the whole body non-scrollable due to the above style.

I would suggest a componentWillUnmount as follows,

  componentWillUnmount: function() {
    // dialog has a side-effect if this not checked
    document.body.style.overflow = 'auto';
  }

or to be more independent, the componentDidMount lifecycle function can store the original state of the body style and on unmount, that style can be restored.

bug 🐛

Source

activatedgeek

👍5

Most helpful comment

Doesn't work well with overflow-y: overlay; CSS property:
ezgif com-video-to-gif

goodwin64 on 23 Sep 2019

👍3

All 3 comments

+1 I'm having this issue right now because I'm managing myself if the Dialog is in the dom or not.

The issue is inside de Overlay component. The overflow property is only updated in componentDidUpdate. But when it's removed, the property is therefore never reset :/