Drawer + Dialog shading on browser reload

[neilmfrench]

First of all, thanks for the library - definitely the best Svelte UI library out right now!

I am doing something similar to this, where I have a Drawer open first, then a Dialog inside of it. I am doing this declaratively, e.g. user navigates to /place/1 -> Drawer is open, user navigates to /place/1/dialog -> Drawer and dialog are both open.

When this is done from actions performed on the UI, like clicking the button that navigates to /place/1 and then clicking another button to navigate to /place/1/dialog, this all works perfectly.

My issue is when I go directly to /place/1/dialog, for example by opening it directly in a new browser tab, the shading on the Drawer is not present. Hopefully the following pictures illustrate that:

Correct - through interactions on the UI

No shading - through going directly to the URL

I could probably hack around this in CSS, but I wanted to see if this is a potential bug first.

[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.

[neilmfrench]

Thanks!! Fix works perfectly :)