Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dialog] Side effects (body overflow hidden property) #897

Closed
activatedgeek opened this issue Jun 20, 2015 · 4 comments
Closed

[Dialog] Side effects (body overflow hidden property) #897

activatedgeek opened this issue Jun 20, 2015 · 4 comments
Labels
bug 🐛 Something doesn't work

Comments

@activatedgeek
Copy link

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.
@hai-cea hai-cea changed the title Dialog Side effects (body overflow hidden property) [Dialog] Side effects (body overflow hidden property) Jun 20, 2015
@tleunen
Copy link

tleunen commented Jul 2, 2015

+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 :/

@Thr1ve
Copy link
Contributor

Thr1ve commented Jul 5, 2015

+1

@jkruder jkruder added the bug 🐛 Something doesn't work label Jul 7, 2015
@jkruder jkruder mentioned this issue Jul 7, 2015
Merged
@jkruder jkruder closed this as completed Jul 9, 2015
@goodwin64
Copy link
Contributor

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

mnajdova pushed a commit to mnajdova/material-ui that referenced this issue Nov 10, 2020
@MahdiAbdi @dmtrKovalenko
replace withTheme HOC with withTheme option. (mui#897)
d8898e9 
fix mui#876
@CalvinJamesHeath
Copy link

Im having the same issue, when I overlay many Dialogs and travel to a different path, the overflow hidden property on the body doesnt get removed even if I update the boolean property of the open Dialog KEY value.

@maniator maniator mentioned this issue Jul 8, 2023
Open
@akashmitra akashmitra mentioned this issue Jul 8, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jkruder @tleunen @activatedgeek @Thr1ve @goodwin64 @CalvinJamesHeath