From a8461924949c42b18f2fbeeb886e5a70c7dd7032 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 7 Dec 2022 09:51:47 +0000
Subject: [PATCH] Fix side panel ejection

---
 .../client/src/components/app/SidePanel.svelte    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index a44bd65e6b..825b401bb8 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@@ -29,6 +29,17 @@
   // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
+  // Derive a render key which is only changed whenever this panel is made
+  // visible after being hidden. We need to key the content to avoid showing
+  // stale data when re-revealing a side panel that was closed, but we cannot
+  // hide the content altogether when hidden as this breaks ejection.
+  let renderKey = null
+  $: {
+    if (open) {
+      renderKey = Math.random()
+    }
+  }
+
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -60,9 +71,9 @@
   class="side-panel"
   class:open
 >
-  {#if open}
+  {#key renderKey}
     <slot />
-  {/if}
+  {/key}
 </div>
 
 <style>