Drawer + Dialog shading on browser reload about svelte-ux

[neilmfrench]

Thanks!! Fix works perfectly :)

[techniq]

Hey @neilmfrench, thanks for the kind words. I have not tried route based Dialog/Drawer like you are using, but definitely feels like a bug with the Backdrop ordering or rendering of Dialog/Drawer (they are portal’s to the bottom). Could also be SSR related. Could you create a small repo on Stackblitz or similar I could investigate the issue?

[neilmfrench]

Thanks @techniq, hopefully this is enough to see it in action: https://stackblitz.com/edit/github-kaggbw-ei6tie?file=src%2Froutes%2Fpage%2F%2Blayout.svelte

If you click through the UI using the navbar by going to Page -> Close button, you should see it working fine. If you go directly to the url .../page/subpage or even refresh with the Dialog open, you'll notice the shading of the drawer is off.

[techniq]

Thanks @neilmfrench, that was exactly what I needed (I ended up pulling it locally as it was a little easier to see the URL and test).

So the issue is the order of Backdrop being rendered differently on refresh (should be immediately before the related Drawer/Dialog) and caused by portal'ing these to the bottom of the DOM (body element) to guarantee there isn't inadvertent styles inherited.

Initial	Refresh

There are 2 solutions / workarounds. Simply moving the <slot> below the <Drawer> instead of within it will fix the issue.

<Drawer
  bind:open={rightOpen}
  placement="right"
  class="w-[550px]"
  on:outroend={close}
>
  <h2>Some content</h2>
  <div slot="actions">
    <Button on:click={create}>Close</Button>
  </div>
</Drawer>

<!-- move this -->
<slot />

or you can pass portal={false} to either <Drawer> or <Dialog> so one is not portal'd to the bottom. Note, if you do this to the <Dialog> the relative context for the absolutely positioned Dialog will be the Drawer, and thus change the display.