Material-design-lite: dialog.close disables page scroll until page is resized

[aoancea]

Working with https://getmdl.io/components/index.html#dialog-section I've encoutered an issue after the dialog is closed.

I managed to reproduce the issue here: http://codepen.io/alexoancea/details/rePpNX/
For some reason, in the editor where the code can be seen and edited, it is not reproducing: http://codepen.io/alexoancea/pen/rePpNX

I've also tried the code inside https://jsfiddle.net/ and https://plnkr.co/ and it does not reproduce -> these are both in the edit window as the one from codepen.io mentioned above.

A great way to reproduce it is to just copy the whole html inside a local index.html file, and after just run it.

What I also found out is that if we remove those two classes mdl-layout mdl-js-layout, the scroll is going to work after we close the dialog. Removing these classes will also enable the scroll in the page while the dialog is opened.

PS: Test in Chrome or Opera since I did not include the dialog polyfill

I hope I'm not doing something wrong in the code which enables this issue :bomb:

Steps to reproduce:

1. Open http://codepen.io/alexoancea/details/rePpNX/
2. Try and scroll the table -> you will see that the scroll works
3. Click on the blue button 'Show dialog' -> if you try and scroll the table while the modal is open, you won't be able to; the entire page is scrollable only
4. Click on the 'Disagree' button -> after the modal closes you'll notice that the scrolling from step 2. is not working anymore
5. Resize the window, either by resizing the browser itself or the container which renders the code -> you will notice that the scroll is enabled again

[aoancea]

@Garbee can you please add the corresponding labels to this, thanks.

[Garbee]

It is working fine here. What exactly are the full steps to reproduce?

Also please fix the links. Both go to some github url and not the actual URLs, this means people need to copy and paste the text to get to them.

[aoancea]

My mistake with the links. I also placed the full steps to reproduce.

[Garbee]

The only thing I can figure here is that the way Layout is implemented causes issues after a native dialog is triggered. Probably nothing to do here except wait for 2.x where Layout is being completely rewritten. But it is a low-priority bug in case anyone from the community wants to debug this to find the source of the problem.

[aoancea]

What I've also seen is that if you have Dev Tools opened and while the scroll isn't working, by simply removing css the scroll is enabled again. So it might have something to do with browser refresh rendering perhaps(I'm not really a UI expert)

[arijitlaik]

got a cheap workaround
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
//work arround is here!
document.querySelector('.mdl-layout__content').style.overflowX = 'auto';
document.querySelector('.mdl-layout__content').style.overflowX = '';
//work arround done!
});
http://codepen.io/anon/pen/vKGopN
@aoancea @Garbee

[Garbee]

This is pretty complicated and difficult to debug exactly why this happens. V2 is overhauling layout along with numerous other components completely. As such, we won't be working on this internally. If anyone from the community wants to handle tracking down and fixing this the mdl-1.x branch is open for PRs.

Thank you.

[aoancea]

The workaround suggested by @arijitlaik it's working I think so putting more time into it if it's difficult isn't worth it as V2 is on the way as well :)

[Garbee]

Good to hear. Thanks for understanding too. It is difficult since I would like to fix this, but with such a small team and major work being done on V2 we just don't have the people-power to handle massive V1 support plus building out the next generation.

[aoancea]

Sure, no worries!

[GenericUK]

I've come across this issue in that latest release when I click an action in the dialog. After closing, scrolling is disabled until refresh. An easy way to test is to add _blank link to the dialog text, after you have clicked the link and then closed the dialog, scrolling will be disabled. I have used jquery .focus() to an input field as a fix. Not sure why focus is not regained when I click on another link after the dialog is closed.

[aoancea]

I'm sure it's fixed in v2 for Angular 2-4 :)

[Garbee]

Material Components for Web's dialog will also be completely custom instead of relying on the dialog element. So there will be more control there along with the decoupled components to fix issues like this if they do exist.

[GenericUK]

Thanks