Fix automation sidebar editor rerendering (#27607)

Author: wendevlin

src/panels/config/automation/ha-automation-sidebar.ts

@@ -36,7 +36,8 @@ export default class HaAutomationSidebar extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _yamlMode = false;
 

src/panels/config/automation/manual-automation-editor.ts

@@ -101,7 +101,7 @@ export class HaManualAutomationEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
-  @state() private _sidebarKey?: string;
+  @state() private _sidebarKey = 0;
 
   @storage({
     key: "automation-sidebar-width",
@@ -350,7 +350,9 @@ export class HaManualAutomationEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
-    this._sidebarKey = JSON.stringify(this._sidebarConfig);
+
+    // be sure the sidebar editor is recreated
+    this._sidebarKey++;
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();
@@ -375,6 +377,7 @@ export class HaManualAutomationEditor extends LitElement {
         return;
       }
       this._sidebarConfig?.close();
+      this._sidebarKey = 0;
     }
   }
 

src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts

@@ -44,7 +44,8 @@ export default class HaAutomationSidebarAction extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _warnings?: string[];
 

src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts

@@ -44,7 +44,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _warnings?: string[];
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -26,7 +26,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _warnings?: string[];
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts

@@ -25,7 +25,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _warnings?: string[];
 

src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts

@@ -37,7 +37,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+  @property({ type: Number, attribute: "sidebar-key" })
+  public sidebarKey?: number;
 
   @state() private _warnings?: string[];
 

src/panels/config/script/manual-script-editor.ts

@@ -89,7 +89,7 @@ export class HaManualScriptEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
-  @state() private _sidebarKey?: string;
+  @state() private _sidebarKey = 0;
 
   @storage({
     key: "automation-sidebar-width",
@@ -512,7 +512,9 @@ export class HaManualScriptEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
-    this._sidebarKey = JSON.stringify(this._sidebarConfig);
+
+    // be sure the sidebar editor is recreated
+    this._sidebarKey++;
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();
@@ -537,6 +539,7 @@ export class HaManualScriptEditor extends LitElement {
         return;
       }
       this._sidebarConfig?.close();
+      this._sidebarKey = 0;
     }
   }