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}
- {/if}
+ {/key}