From d22a82c4a6da86998c7e7a25e827e37b51cba4b5 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Wed, 19 Feb 2025 22:57:34 -0800
Subject: [PATCH] Teardown and rebuild element editor when switching stack
 cards (#24065)

---
 .../config-elements/hui-stack-card-editor.ts  | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index 1d5d945dbc..595eae1866 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -21,6 +21,7 @@ import {
   optional,
   string,
 } from "superstruct";
+import { keyed } from "lit/directives/keyed";
 import type {
   HaFormSchema,
   SchemaUnion,
@@ -84,6 +85,8 @@ export class HuiStackCardEditor
 
   @state() protected _guiModeAvailable? = true;
 
+  protected _keys = new WeakMap<LovelaceCardConfig, string>();
+
   protected _schema: readonly HaFormSchema[] = SCHEMA;
 
   @query("hui-card-element-editor")
@@ -199,14 +202,16 @@ export class HuiStackCardEditor
                     @click=${this._handleDeleteCard}
                   ></ha-icon-button>
                 </div>
-
-                <hui-card-element-editor
-                  .hass=${this.hass}
-                  .value=${this._config.cards[selected]}
-                  .lovelace=${this.lovelace}
-                  @config-changed=${this._handleConfigChanged}
-                  @GUImode-changed=${this._handleGUIModeChanged}
-                ></hui-card-element-editor>
+                ${keyed(
+                  this._getKey(this._config.cards[selected]),
+                  html`<hui-card-element-editor
+                    .hass=${this.hass}
+                    .value=${this._config.cards[selected]}
+                    .lovelace=${this.lovelace}
+                    @config-changed=${this._handleConfigChanged}
+                    @GUImode-changed=${this._handleGUIModeChanged}
+                  ></hui-card-element-editor>`
+                )}
               `
             : html`
                 <hui-card-picker
@@ -220,6 +225,14 @@ export class HuiStackCardEditor
     `;
   }
 
+  private _getKey(card: LovelaceCardConfig) {
+    if (!this._keys.has(card)) {
+      this._keys.set(card, Math.random().toString());
+    }
+
+    return this._keys.get(card)!;
+  }
+
   protected _handleSelectedCard(ev) {
     if (ev.target.id === "add-card") {
       this._selectedCard = this._config!.cards.length;
@@ -236,7 +249,10 @@ export class HuiStackCardEditor
       return;
     }
     const cards = [...this._config.cards];
-    cards[this._selectedCard] = ev.detail.config as LovelaceCardConfig;
+    const key = this._getKey(cards[this._selectedCard]);
+    const newCard = ev.detail.config as LovelaceCardConfig;
+    cards[this._selectedCard] = newCard;
+    this._keys.set(newCard, key);
     this._config = { ...this._config, cards };
     this._guiModeAvailable = ev.detail.guiModeAvailable;
     fireEvent(this, "config-changed", { config: this._config });