search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

Dialog example issue on site #338

Closed buinauskas closed 8 years ago

buinauskas commented 8 years ago

Not sure if it's the right place to submit this, but Dialog scrolling is not working properly on documentation site: https://tleunen.github.io/react-mdl/components/dialog/

Once you open page, it's scrollable. However if you open and close dialog, page becomes unscrollable (I mean mousewheel).

Tested on latest Chrome version(Windows).

It seems to be working on Firefox, Edge.

tleunen commented 8 years ago

Yes, this issue has been reported a couple of times already (even if I can't find the previous tickets :/).

I have no idea why the scroll doesn't work after opening a modal. I would definitely need to investigate this. Feel free to jump in and help me to find a solution ;)

buinauskas commented 8 years ago

Just quoting this from description:

This component uses dialog element, which is only supported by Chrome and Opera currently. For other browsers, you need to include a polyfill in your code

Surprisingly, this bug can be reproduced in both Chrome and Opera, which might lead that issue is related to polyfill/dialog element.

Going further: This is error from console:

Can't upgrade <dialog>: already supported

<dialog class=​"mdl-dialog">​
  <h4 class=​"mdl-dialog__title">​Allow data collection?​</h4>​
  <div class="mdl-dialog__content">​
    <p>​"Allowing us to collect data will let us get you the information you want faster."</p>​
  </div>​
  <div class=​"mdl-dialog__actions">​
    <button class="mdl-button mdl-js-button" type=​ "button" data-upgraded=​ ",MaterialButton">​Agree​</button>​
    <button class=​"mdl-button mdl-js-button" type=​ "button" data-upgraded=​ ",MaterialButton">​Disagree​</button>​
  </div>
</dialog>​

Could it be that polyfill tries to overwrite default

element and it conflicts?

tleunen commented 8 years ago

Chrome doesn't use the polyfill, because Dialog is natively supported. So it might be a bug with the native Dialog then.

I can reproduce the issue quite often, but it's not 100% repro. I don't really know what could be the conflict here.

SB3K commented 8 years ago

Not sure if this helps, but on a dialog where a Snackbar is triggered on close, scroll works fine.

tleunen commented 8 years ago

Duplicate of #253