Fix bug where stale data is shown in custom css drawer when changing components

5 years ago · 48fdc8a2df
1 changed files with 13 additions and 11 deletions
--- a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@ -35,17 +35,19 @@
    <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
  </div>
 </DetailSummary>
-<Drawer bind:this={drawer} title="Custom CSS">
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <DrawerContent slot="body">
-    <div class="content">
-      <Layout gap="S">
-        <Body size="S">Custom CSS overrides all other component styles.</Body>
-        <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
-      </Layout>
-    </div>
-  </DrawerContent>
-</Drawer>
+{#key componentInstance?._id}
+  <Drawer bind:this={drawer} title="Custom CSS">
+    <Button cta slot="buttons" on:click={save}>Save</Button>
+    <DrawerContent slot="body">
+      <div class="content">
+        <Layout gap="S">
+          <Body size="S">Custom CSS overrides all other component styles.</Body>
+          <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+        </Layout>
+      </div>
+    </DrawerContent>
+  </Drawer>
+{/key}

 <style>
  .content {