Don't update entity picker items while open (#5588)

* Don't update entity picker items while open

* Update items in updated, when we open the dropdown
This commit is contained in:
Bram Kragten
2020-04-24 10:36:38 +02:00
committed by GitHub
parent 2503fabe1d
commit 355f40d740
6 changed files with 38 additions and 36 deletions

View File

@@ -12,6 +12,7 @@ import {
property,
PropertyValues,
TemplateResult,
query,
} from "lit-element";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
@@ -91,12 +92,13 @@ class HaEntityPicker extends LitElement {
@property() public entityFilter?: HaEntityPickerEntityFilterFunc;
@property({ type: Boolean }) private _opened?: boolean;
@property({ type: Boolean }) private _opened = false;
@property() private _hass?: HomeAssistant;
@query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
private _getStates = memoizeOne(
(
_opened: boolean,
hass: this["hass"],
includeDomains: this["includeDomains"],
excludeDomains: this["excludeDomains"],
@@ -147,27 +149,28 @@ class HaEntityPicker extends LitElement {
);
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("hass") && !this._opened) {
this._hass = this.hass;
if (changedProps.has("_opened") && this._opened) {
const states = this._getStates(
this._opened,
this.hass,
this.includeDomains,
this.excludeDomains,
this.entityFilter,
this.includeDeviceClasses
);
(this._comboBox as any).items = states;
}
}
protected render(): TemplateResult {
const states = this._getStates(
this._hass,
this.includeDomains,
this.excludeDomains,
this.entityFilter,
this.includeDeviceClasses
);
if (!this.hass) {
return html``;
}
return html`
<vaadin-combo-box-light
item-value-path="entity_id"
item-label-path="entity_id"
.items=${states}
.value=${this._value}
.allowCustomValue=${this.allowCustomEntity}
.renderer=${rowRenderer}
@@ -176,8 +179,8 @@ class HaEntityPicker extends LitElement {
>
<paper-input
.autofocus=${this.autofocus}
.label=${this.label === undefined && this._hass
? this._hass.localize("ui.components.entity.entity-picker.entity")
.label=${this.label === undefined
? this.hass.localize("ui.components.entity.entity-picker.entity")
: this.label}
.value=${this._value}
.disabled=${this.disabled}
@@ -190,7 +193,7 @@ class HaEntityPicker extends LitElement {
${this.value
? html`
<paper-icon-button
aria-label=${this.hass!.localize(
aria-label=${this.hass.localize(
"ui.components.entity.entity-picker.clear"
)}
slot="suffix"
@@ -203,20 +206,17 @@ class HaEntityPicker extends LitElement {
</paper-icon-button>
`
: ""}
${states.length > 0
? html`
<paper-icon-button
aria-label=${this.hass!.localize(
"ui.components.entity.entity-picker.show_entities"
)}
slot="suffix"
class="toggle-button"
.icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
>
Toggle
</paper-icon-button>
`
: ""}
<paper-icon-button
aria-label=${this.hass.localize(
"ui.components.entity.entity-picker.show_entities"
)}
slot="suffix"
class="toggle-button"
.icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
>
Toggle
</paper-icon-button>
</paper-input>
</vaadin-combo-box-light>
`;