Rerun layoutOptions when input_select options change (#15274)

fixes undefined
This commit is contained in:
karwosts 2023-02-07 01:10:15 -08:00 committed by GitHub
parent 251b2540c7
commit a74c05a004
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 5 deletions

View File

@ -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}

View File

@ -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`
<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