Fully remount component settings when changing selected component

4 years ago · 32aa686884
1 changed files with 22 additions and 16 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@ -27,20 +27,26 @@
 </script>

 {#if $selectedComponent}
-  <Panel {title} icon={componentDefinition.icon} borderLeft>
-    <ComponentSettingsSection
-      {componentInstance}
-      {componentDefinition}
-      {bindings}
-      {componentBindings}
-      {isScreen}
-    />
-    <DesignSection {componentInstance} {componentDefinition} {bindings} />
-    <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />
-    <ConditionalUISection
-      {componentInstance}
-      {componentDefinition}
-      {bindings}
-    />
-  </Panel>
+  {#key $selectedComponent._id}
+    <Panel {title} icon={componentDefinition.icon} borderLeft>
+      <ComponentSettingsSection
+        {componentInstance}
+        {componentDefinition}
+        {bindings}
+        {componentBindings}
+        {isScreen}
+      />
+      <DesignSection {componentInstance} {componentDefinition} {bindings} />
+      <CustomStylesSection
+        {componentInstance}
+        {componentDefinition}
+        {bindings}
+      />
+      <ConditionalUISection
+        {componentInstance}
+        {componentDefinition}
+        {bindings}
+      />
+    </Panel>
+  {/key}
 {/if}