Fix DOM reuse for trigger/condition/action (#13407)

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

@@ -42,13 +42,13 @@ export default class HaAutomationAction extends LitElement {
 
   private _focusLastActionOnChange = false;
 
+  private _actionKeys = new WeakMap<Action, string>();
+
   protected render() {
     return html`
       ${repeat(
         this.actions,
-        // Use the action as key, so moving around keeps the same DOM,
+        (action) => this._getKey(action),
-        // including expand state
-        (action) => action,
         (action, idx) => html`
           <ha-automation-action-row
             .index=${idx}
@@ -95,6 +95,14 @@ export default class HaAutomationAction extends LitElement {
     }
   }
 
+  private _getKey(action: Action) {
+    if (!this._actionKeys.has(action)) {
+      this._actionKeys.set(action, Math.random().toString());
+    }
+
+    return this._actionKeys.get(action)!;
+  }
+
   private _addAction(ev: CustomEvent<ActionDetail>) {
     const action = (ev.currentTarget as HaSelect).items[ev.detail.index]
       .value as typeof ACTION_TYPES[number];
@@ -131,6 +139,10 @@ export default class HaAutomationAction extends LitElement {
     if (newValue === null) {
       actions.splice(index, 1);
     } else {
+      // Store key on new value.
+      const key = this._getKey(actions[index]);
+      this._actionKeys.set(newValue, key);
+
       actions[index] = newValue;
     }
 

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

@@ -38,6 +38,8 @@ export default class HaAutomationCondition extends LitElement {
 
   private _focusLastConditionOnChange = false;
 
+  private _conditionKeys = new WeakMap<Condition, string>();
+
   protected updated(changedProperties: PropertyValues) {
     if (!changedProperties.has("conditions")) {
       return;
@@ -79,9 +81,7 @@ export default class HaAutomationCondition extends LitElement {
     return html`
       ${repeat(
         this.conditions,
-        // Use the condition as key, so moving around keeps the same DOM,
+        (condition) => this._getKey(condition),
-        // including expand state
-        (condition) => condition,
         (cond, idx) => html`
           <ha-automation-condition-row
             .index=${idx}
@@ -111,6 +111,14 @@ export default class HaAutomationCondition extends LitElement {
     `;
   }
 
+  private _getKey(condition: Condition) {
+    if (!this._conditionKeys.has(condition)) {
+      this._conditionKeys.set(condition, Math.random().toString());
+    }
+
+    return this._conditionKeys.get(condition)!;
+  }
+
   private _addCondition(ev: CustomEvent<ActionDetail>) {
     const condition = (ev.currentTarget as HaSelect).items[ev.detail.index]
       .value as Condition["condition"];
@@ -138,6 +146,10 @@ export default class HaAutomationCondition extends LitElement {
     if (newValue === null) {
       conditions.splice(index, 1);
     } else {
+      // Store key on new value.
+      const key = this._getKey(conditions[index]);
+      this._conditionKeys.set(newValue, key);
+
       conditions[index] = newValue;
     }
 

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

@@ -41,13 +41,13 @@ export default class HaAutomationTrigger extends LitElement {
 
   private _focusLastTriggerOnChange = false;
 
+  private _triggerKeys = new WeakMap<Trigger, string>();
+
   protected render() {
     return html`
       ${repeat(
         this.triggers,
-        // Use the trigger as key, so moving around keeps the same DOM,
+        (trigger) => this._getKey(trigger),
-        // including expand state
-        (trigger) => trigger,
         (trg, idx) => html`
           <ha-automation-trigger-row
             .index=${idx}
@@ -91,6 +91,14 @@ export default class HaAutomationTrigger extends LitElement {
     }
   }
 
+  private _getKey(action: Trigger) {
+    if (!this._triggerKeys.has(action)) {
+      this._triggerKeys.set(action, Math.random().toString());
+    }
+
+    return this._triggerKeys.get(action)!;
+  }
+
   private _addTrigger(ev: CustomEvent<ActionDetail>) {
     const platform = (ev.currentTarget as HaSelect).items[ev.detail.index]
       .value as Trigger["platform"];
@@ -118,6 +126,10 @@ export default class HaAutomationTrigger extends LitElement {
     if (newValue === null) {
       triggers.splice(index, 1);
     } else {
+      // Store key on new value.
+      const key = this._getKey(triggers[index]);
+      this._triggerKeys.set(newValue, key);
+
       triggers[index] = newValue;
     }