react-mdl
react-mdl copied to clipboard
tleunen
Dialog | After closing the dialog the content isn't scrollable with the mousewheel in Chrome
When you try to close an opened dialog at the examples than the overflow scrolling on body is not possible anymore:
https://tleunen.github.io/react-mdl/#/dialogs
I'm wondering if it's not a chrome issue.. If I open the devtools or resize the window, it resolves the issue :/
Just researched a little: It's the div container with class "mdl-layout__inner-container"!
If you set on close overflow-x on "auto" it works...
It seems a bug in chrome? you need to "touch" the overflow style...
Ok... this is super strange:
You have to set after the close of a dialog (verified on Chrome):
document.getElementsByClassName('mdl-layout__inner-container')[0].style.overflowX='auto'; document.getElementsByClassName('mdl-layout__inner-container')[0].style.overflowX='';
Try it on the demo page...
I think this is a css issue. Have you copied the css from Google?
This works for me:
...
handleCloseDialog() {
this.setState({
dialogIsOpen: false
});
/* Workaround !!!!*/
document.getElementsByClassName('mdl-layout__inner-container')[0].style.overflowX='auto';
document.getElementsByClassName('mdl-layout__inner-container')[0].style.overflowX='';
}
...
Seems so, did you create an issue on Chrome Issues? [Adding that for all browsers is a little bit aggressive and might trigger fouc on some browsers]
Yep, try to create a small codepen example for example and submit a ticket in Chrome please.
Hmm... very strange. When I click on the "show dialog" button @ https://tleunen.github.io/react-mdl/components/dialog and then close the dialog I can't scroll the content anymore.
Here you can copy
document.getElementsByClassName('mdl-layout__inner-container')[0].style.overflowX='auto';
in the console and the content is scrollable again.
When you look at the codpen http://codepen.io/jolic/pen/dMmzpX/?editors=0010 the content is scrollable after closing the dialog but also when the dialog is opened.
...need to investigate a bit more but currently i have no time. Could somebody else have a look at it?
In react-mdl website, the scrollable content is not the body, maybe it's related to that.
@darkyen Steps to reproduce: With Chrome go to https://tleunen.github.io/react-mdl/components/dialog and click on the first "Show Dialog" button. When the dialog opens click on "Disagree". After the dialog is closed you can't scroll the content with the mousewheel anymore.
If you open the console and trigger the function call (see above) the content is scrollable with the mousewheel again.
@tleunen
It's not the <body>. The title of this issue is misleading as I know now that the content which is scrolling is <div class="mdl-layout__inner-container"...></div>.
But the issue is still not reproducible in the codepen example :/ That's weird
@tleunen I think it has to do something with complex structures in chrome (could be userland code aswell). It works in firefox and even edge. There were a few warnings thrown by dialog-polyfill.js in chrome though "can't upgrade
Also by changing the overflowX to change you are forcing the browser to re-layout.
Here are 2 problems:
- The example @ https://tleunen.github.io/react-mdl/components/dialog doesn't set the content to be scrollable with the mousewheel on Chrome after the dialog is closed.
- Why is the content scrollable with the mousewheel on Chrome when the dialog is opened @ http://codepen.io/jolic/pen/dMmzpX/?editors=0010?
The codepen example uses a simple <Layout/> with a dialog inside <Content/> taken from the react-mdl example.
Could somebody test both examples without any extensions in Chrome? Maybe this could be the issue?
So, I've researched a couple of things and I'm sure the Dialog Component is not suitable. The Dialog is currently supported natively from Chrome and Opera (see http://www.getmdl.io/components/index.html#dialog-section). A polyfill is available @ https://github.com/GoogleChrome/dialog-polyfill and the demo @ http://demo.agektmr.com/dialog/ shows that the content can be scrolled even if a dialog is opened. This is not a normal behaviour.
Therefore it would be better to implement something like react-modal (https://github.com/reactjs/react-modal) as the modal window is appended directly at the <body>.
If it's (currently) only an issue on the React-MDL website because of the inner panel scrolling.. That's ok. I won't change how it works because of that. MDL is built with the native dialog feature, so we do the same. It doesn't make a lot a sense now to create a dialog module since a native dialog is available for us.
@tleunen (: have you branched off from being just a micro-wrapper approach?
Hey guys, just noticed that weird bug.. Shouldn't we file a bug on chromium or something?
I have the same bug with MDL using in chrome 52.
Solution :
document.querySelector('main.mdl-layout__content').style.overflowY = ''; modal.close(); document.querySelector('main.mdl-layout__content').style.overflowY = 'auto';
I'm really hoping the v2 will solve this issue because it's related to the way the Layout is built (internal scroller).
Win10/Chrome Version 53.0.2785.101 m
Taking a look a this issue I found something even weird: open the dev tools, inspect the button to open the modal rename the "mdl-button" class from the button to "mdl-button1" or whatever everything will work fine rename the class back to "mdl-button" and the scroll is broken again
May it be related to the layers doing the ripple animation?
