Rerun layoutOptions when input_select options change (#15274)

fixes undefined

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}

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 {
-import { customElement, property } from "lit/decorators";
+  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`
       <state-badge .stateObj=${this.stateObj}></state-badge>
@@ -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