Only recreate stack editor when the type or index change (#24530)

This commit is contained in:
Paul Bottein 2025-03-06 15:55:20 +01:00 committed by GitHub
parent 913fdfd0eb
commit 8fe55b9bc0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -85,7 +85,7 @@ export class HuiStackCardEditor
@state() protected _guiModeAvailable? = true; @state() protected _guiModeAvailable? = true;
protected _keys = new WeakMap<LovelaceCardConfig, string>(); protected _keys = new Map<string, string>();
protected _schema: readonly HaFormSchema[] = SCHEMA; protected _schema: readonly HaFormSchema[] = SCHEMA;
@ -203,7 +203,7 @@ export class HuiStackCardEditor
></ha-icon-button> ></ha-icon-button>
</div> </div>
${keyed( ${keyed(
this._getKey(this._config.cards[selected]), this._getKey(this._config.cards, selected),
html`<hui-card-element-editor html`<hui-card-element-editor
.hass=${this.hass} .hass=${this.hass}
.value=${this._config.cards[selected]} .value=${this._config.cards[selected]}
@ -225,12 +225,13 @@ export class HuiStackCardEditor
`; `;
} }
private _getKey(card: LovelaceCardConfig) { private _getKey(cards: LovelaceCardConfig[], index: number): string {
if (!this._keys.has(card)) { const key = `${cards[index].type}${index}${cards.length}`;
this._keys.set(card, Math.random().toString()); if (!this._keys.has(key)) {
this._keys.set(key, Math.random().toString());
} }
return this._keys.get(card)!; return this._keys.get(key)!;
} }
protected _handleSelectedCard(ev) { protected _handleSelectedCard(ev) {
@ -249,10 +250,8 @@ export class HuiStackCardEditor
return; return;
} }
const cards = [...this._config.cards]; const cards = [...this._config.cards];
const key = this._getKey(cards[this._selectedCard]);
const newCard = ev.detail.config as LovelaceCardConfig; const newCard = ev.detail.config as LovelaceCardConfig;
cards[this._selectedCard] = newCard; cards[this._selectedCard] = newCard;
this._keys.set(newCard, key);
this._config = { ...this._config, cards }; this._config = { ...this._config, cards };
this._guiModeAvailable = ev.detail.guiModeAvailable; this._guiModeAvailable = ev.detail.guiModeAvailable;
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
@ -266,6 +265,7 @@ export class HuiStackCardEditor
const config = ev.detail.config; const config = ev.detail.config;
const cards = [...this._config.cards, config]; const cards = [...this._config.cards, config];
this._config = { ...this._config, cards }; this._config = { ...this._config, cards };
this._keys.clear();
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }
@ -289,6 +289,7 @@ export class HuiStackCardEditor
cards.splice(this._selectedCard, 1); cards.splice(this._selectedCard, 1);
this._config = { ...this._config, cards }; this._config = { ...this._config, cards };
this._selectedCard = Math.max(0, this._selectedCard - 1); this._selectedCard = Math.max(0, this._selectedCard - 1);
this._keys.clear();
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }
@ -307,6 +308,7 @@ export class HuiStackCardEditor
cards, cards,
}; };
this._selectedCard = target; this._selectedCard = target;
this._keys.clear();
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }