Fix clear area action in area-picker (#25511)

* Fix clear area action in area-picker

* Fix area not displayed after creation
This commit is contained in:
Paul Bottein 2025-05-20 10:01:01 +02:00 committed by GitHub
parent 83df10ef29
commit 01b398c2a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -94,7 +94,10 @@ export class HaAreaPicker extends LitElement {
await this._picker?.open(); await this._picker?.open();
} }
private _valueRenderer: PickerValueRenderer = (value) => { // Recompute value renderer when the areas change
private _computeValueRenderer = memoizeOne(
(_haAreas: HomeAssistant["areas"]): PickerValueRenderer =>
(value) => {
const area = this.hass.areas[value]; const area = this.hass.areas[value];
if (!area) { if (!area) {
@ -114,13 +117,17 @@ export class HaAreaPicker extends LitElement {
return html` return html`
${icon ${icon
? html`<ha-icon slot="start" .icon=${icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>`} : html`<ha-svg-icon
slot="start"
.path=${mdiTextureBox}
></ha-svg-icon>`}
<span slot="headline">${areaName}</span> <span slot="headline">${areaName}</span>
${floorName ${floorName
? html`<span slot="supporting-text">${floorName}</span>` ? html`<span slot="supporting-text">${floorName}</span>`
: nothing} : nothing}
`; `;
}; }
);
private _getAreas = memoizeOne( private _getAreas = memoizeOne(
( (
@ -352,6 +359,8 @@ export class HaAreaPicker extends LitElement {
const placeholder = const placeholder =
this.placeholder ?? this.hass.localize("ui.components.area-picker.area"); this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
const valueRenderer = this._computeValueRenderer(this.hass.areas);
return html` return html`
<ha-generic-picker <ha-generic-picker
.hass=${this.hass} .hass=${this.hass}
@ -364,7 +373,7 @@ export class HaAreaPicker extends LitElement {
.value=${this.value} .value=${this.value}
.getItems=${this._getItems} .getItems=${this._getItems}
.getAdditionalItems=${this._getAdditionalItems} .getAdditionalItems=${this._getAdditionalItems}
.valueRenderer=${this._valueRenderer} .valueRenderer=${valueRenderer}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
> >
</ha-generic-picker> </ha-generic-picker>
@ -375,13 +384,12 @@ export class HaAreaPicker extends LitElement {
ev.stopPropagation(); ev.stopPropagation();
const value = ev.detail.value; const value = ev.detail.value;
if (!value.startsWith(ADD_NEW_ID)) { if (!value) {
if (value !== this.value) { this._setValue(undefined);
this._setValue(value);
}
return; return;
} }
if (value.startsWith(ADD_NEW_ID)) {
this.hass.loadFragmentTranslation("config"); this.hass.loadFragmentTranslation("config");
const suggestedName = value.substring(ADD_NEW_ID.length); const suggestedName = value.substring(ADD_NEW_ID.length);
@ -404,6 +412,9 @@ export class HaAreaPicker extends LitElement {
}); });
} }
this._setValue(value);
}
private _setValue(value?: string) { private _setValue(value?: string) {
this.value = value; this.value = value;
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });