[Dialog / Drawer] Workaround Svelte 5 regression with portal'd conten…

…t and conditional (sveltejs/svelte#12440)
techniq · Jul 15, 2024 · 54d9d39 · 54d9d39
1 parent 6fe4569
commit 54d9d39
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/real-zebras-compete.md b/.changeset/real-zebras-compete.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[Dialog / Drawer] Workaround Svelte 5 regression with portal'd content and conditional (https://github.com/sveltejs/svelte/issues/12440)
diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte
@@ -64,6 +64,7 @@
   }
 </script>
 
+<!-- Separate `{#if}` block works around Svelte 5 regression: https://github.com/sveltejs/svelte/issues/12440  -->
 {#if open}
   <Backdrop
     on:click={() => {
@@ -80,7 +81,9 @@
     fadeParams={{ duration: 150 }}
     {portal}
   />
+{/if}
 
+{#if open}
   <div
     class={cls(
       'Dialog',

diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte
@@ -33,6 +33,7 @@
   }
 </script>
 
+<!-- Separate `{#if}` block works around Svelte 5 regression: https://github.com/sveltejs/svelte/issues/12440  -->
 {#if open}
   <Backdrop
     on:click={(e) => {
@@ -48,7 +49,9 @@
     class={cls('z-50', settingsClasses.backdrop, classes.backdrop)}
     {portal}
   />
+{/if}
 
+{#if open}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div
     class={cls(