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

src/components/entity/ha-entity-picker.ts

@@ -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("_opened") && this._opened) {
-
+      const states = this._getStates(
-    if (changedProps.has("hass") && !this._opened) {
+        this._opened,
-      this._hass = this.hass;
+        this.hass,
+        this.includeDomains,
+        this.excludeDomains,
+        this.entityFilter,
+        this.includeDeviceClasses
+      );
+      (this._comboBox as any).items = states;
     }
   }
 
   protected render(): TemplateResult {
-    const states = this._getStates(
+    if (!this.hass) {
-      this._hass,
+      return html``;
-      this.includeDomains,
+    }
-      this.excludeDomains,
-      this.entityFilter,
-      this.includeDeviceClasses
-    );
 
     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
+          .label=${this.label === undefined
-            ? this._hass.localize("ui.components.entity.entity-picker.entity")
+            ? 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
-                <paper-icon-button
+            aria-label=${this.hass.localize(
-                  aria-label=${this.hass!.localize(
+              "ui.components.entity.entity-picker.show_entities"
-                    "ui.components.entity.entity-picker.show_entities"
+            )}
-                  )}
+            slot="suffix"
-                  slot="suffix"
+            class="toggle-button"
-                  class="toggle-button"
+            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
+          >
-                >
+            Toggle
-                  Toggle
+          </paper-icon-button>
-                </paper-icon-button>
-              `
-            : ""}
         </paper-input>
       </vaadin-combo-box-light>
     `;

src/panels/config/automation/action/types/ha-automation-action-scene.ts

@@ -24,7 +24,7 @@ export class HaSceneAction extends LitElement implements ActionElement {
         .hass=${this.hass}
         .value=${scene}
         @value-changed=${this._entityPicked}
-        .includeDomains=${["scene"]}
+        include-domains="['scene']"
         allow-custom-entity
       ></ha-entity-picker>
     `;

src/panels/config/automation/action/types/ha-automation-action-service.ts

@@ -34,6 +34,8 @@ export class HaServiceAction extends LitElement implements ActionElement {
     return { service: "", data: {} };
   }
 
+  private _domain = memoizeOne((service: string) => [computeDomain(service)]);
+
   private _getServiceData = memoizeOne((service: string) => {
     if (!service) {
       return [];
@@ -85,7 +87,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
               .value=${entity_id}
               .label=${entity.description}
               @value-changed=${this._entityPicked}
-              .includeDomains=${[computeDomain(service)]}
+              .includeDomains=${this._domain(service)}
               allow-custom-entity
             ></ha-entity-picker>
           `

src/panels/config/automation/condition/types/ha-automation-condition-zone.ts

@@ -46,7 +46,7 @@ export class HaZoneCondition extends LitElement {
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
         allow-custom-entity
-        .includeDomains=${["zone"]}
+        include-domains="['zone']"
       ></ha-entity-picker>
       <label id="eventlabel">
         ${this.hass.localize(

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -42,7 +42,7 @@ export default class HaGeolocationTrigger extends LitElement {
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
         allow-custom-entity
-        .includeDomains=${["zone"]}
+        include-domains="['zone']"
       ></ha-entity-picker>
       <label id="eventlabel">
         ${this.hass.localize(

src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts

@@ -49,7 +49,7 @@ export class HaZoneTrigger extends LitElement {
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
         allow-custom-entity
-        .includeDomains=${["zone"]}
+        include-domains="['zone']"
       ></ha-entity-picker>
       <label id="eventlabel">
         ${this.hass.localize(