search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

Conditionally displayed Dialog can lock scrolling #588

Open dnnsmnstrr opened 1 year ago

dnnsmnstrr commented 1 year ago

Describe the bug I am using the Dialog component within a child component of a SvelteKit page, which renders the component dependent on a condition (the dialog asks to confirm the cancellation of a file upload). When the cancellation is confirmed, the component containing the dialog closes, changing the condition and therefore not being rendered anymore. Unfortunately, following this action, scrolling on the page is disabled.

I was able to pinpoint the problem to the mdc-dialog-scroll-lock class not being removed from the document body, which could be solved by calling document.body.classList.remove('mdc-dialog-scroll-lock') in the on:click of the Dialog-Action-Button. Maybe there is a way to fix this in the component itself?

To Reproduce The scenario is recreated in this REPL

  1. Test to see that scrolling works on the main body
  2. Click Show Dialog Button to enable the condition that renders the dialog component
  3. Click Open Dialog and confirm by clicking yes
  4. Scrolling should now be disabled

To test the fix, uncomment line 24 in Dialog.svelte and repeat the previous steps

Expected behavior After clicking on a button within the Dialog, page-scrolling is not locked when the dialog is closed.

Desktop:

drewsilcock commented 1 year ago

I am also experiencing this in the same circumstance of a conditionally rendered dialog and currently working around it by adding the document.body.classList.remove("mdc-dialog-scroll-lock") to the on:click handlers for all of the action buttons.

I tried adding it to the on:SMUIDialog:closing and on:SMUIDialog:closed handlers but that didn't seem to work. I'm guessing that the reactivity logic in Dialog.svelte:199-211 is happening after the dialog close events, but not really sure.