diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 7e27cdac76..c6c7fe3eec 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/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(); + protected render() { return html` ${repeat( this.actions, - // Use the action as key, so moving around keeps the same DOM, - // including expand state - (action) => action, + (action) => this._getKey(action), (action, idx) => html` ) { 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; } diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 9229fa5657..b8b62a7d14 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/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(); + 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, - // including expand state - (condition) => condition, + (condition) => this._getKey(condition), (cond, idx) => html` ) { 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; } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 9480f49220..d961c96b10 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/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(); + protected render() { return html` ${repeat( this.triggers, - // Use the trigger as key, so moving around keeps the same DOM, - // including expand state - (trigger) => trigger, + (trigger) => this._getKey(trigger), (trg, idx) => html` ) { 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; }