diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index 896c8c4113..ac5003d2ee 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -1,6 +1,6 @@ import "@material/mwc-list/mwc-list-item"; import { css, html, LitElement, PropertyValues, TemplateResult } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property, state, query } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-select"; @@ -16,6 +16,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceRow } from "./types"; +import type { HaSelect } from "../../../components/ha-select"; @customElement("hui-input-select-entity-row") class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { @@ -23,6 +24,8 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { @state() private _config?: EntitiesCardEntityConfig; + @query("ha-select") private _haSelect!: HaSelect; + public setConfig(config: EntitiesCardEntityConfig): void { if (!config || !config.entity) { throw new Error("Entity must be specified"); @@ -35,6 +38,22 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { return hasConfigOrEntityChanged(this, changedProps); } + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + if (changedProps.has("hass")) { + const oldHass = changedProps.get("hass"); + if ( + this.hass && + oldHass && + this._config?.entity && + this.hass.states[this._config.entity].attributes.options !== + oldHass.states[this._config.entity].attributes.options + ) { + this._haSelect.layoutOptions(); + } + } + } + protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; @@ -62,7 +81,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { .label=${this._config.name || computeStateName(stateObj)} .value=${stateObj.state} .disabled=${ - stateObj.state === UNAVAILABLE /* UNKNWON state is allowed */ + stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */ } naturalMenuWidth @selected=${this._selectedChanged} diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts index 2472eac01e..bf276776c8 100644 --- a/src/state-summary/state-card-input_select.ts +++ b/src/state-summary/state-card-input_select.ts @@ -1,13 +1,21 @@ import "@material/mwc-list/mwc-list-item"; import "../components/ha-select"; -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; +import { + css, + CSSResultGroup, + html, + LitElement, + TemplateResult, + PropertyValues, +} from "lit"; +import { customElement, property, query } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; import { computeStateName } from "../common/entity/compute_state_name"; import "../components/entity/state-badge"; import { UNAVAILABLE } from "../data/entity"; import { InputSelectEntity, setInputSelectOption } from "../data/input_select"; import type { HomeAssistant } from "../types"; +import type { HaSelect } from "../components/ha-select"; @customElement("state-card-input_select") class StateCardInputSelect extends LitElement { @@ -15,6 +23,21 @@ class StateCardInputSelect extends LitElement { @property() public stateObj!: InputSelectEntity; + @query("ha-select", true) private _haSelect!: HaSelect; + + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + if (changedProps.has("stateObj")) { + const oldState = changedProps.get("stateObj"); + if ( + oldState && + this.stateObj.attributes.options !== oldState.attributes.options + ) { + this._haSelect.layoutOptions(); + } + } + } + protected render(): TemplateResult { return html` @@ -22,7 +45,7 @@ class StateCardInputSelect extends LitElement { .label=${computeStateName(this.stateObj)} .value=${this.stateObj.state} .disabled=${ - this.stateObj.state === UNAVAILABLE /* UNKNWON state is allowed */ + this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */ } naturalMenuWidth fixedMenuPosition