Convert entity-attribute picker to ha-combo-box (#11587)

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

@@ -1,54 +1,14 @@
-import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
 import { formatAttributeName } from "../../data/entity_attributes";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
-import "../ha-svg-icon";
-import "./state-badge";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
-    paper-item {
-      padding: 0;
-      margin: -10px;
-      margin-left: 0;
-    }
-    #content {
-      display: flex;
-      align-items: center;
-    }
-    ha-svg-icon {
-      padding-left: 2px;
-      margin-right: -2px;
-      color: var(--secondary-text-color);
-    }
-    :host(:not([selected])) ha-svg-icon {
-      display: none;
-    }
-    :host([selected]) paper-item {
-      margin-left: 10px;
-    }
-  </style>
-  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-  <paper-item>${formatAttributeName(item)}</paper-item>`;
-
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -68,7 +28,7 @@ class HaEntityAttributePicker extends LitElement {
 
   @property({ type: Boolean }) private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
   protected shouldUpdate(changedProps: PropertyValues) {
     return !(!changedProps.has("_opened") && this._opened);
@@ -78,7 +38,10 @@ class HaEntityAttributePicker extends LitElement {
     if (changedProps.has("_opened") && this._opened) {
       const state = this.entityId ? this.hass.states[this.entityId] : undefined;
       (this._comboBox as any).items = state
-        ? Object.keys(state.attributes)
+        ? Object.keys(state.attributes).map((key) => ({
+            value: key,
+            label: formatAttributeName(key),
+          }))
         : [];
     }
   }
@@ -89,100 +52,31 @@ class HaEntityAttributePicker extends LitElement {
     }
 
     return html`
-      <vaadin-combo-box-light
-        .value=${this._value}
+      <ha-combo-box
+        .hass=${this.hass}
+        .value=${this.value || ""}
+        .autofocus=${this.autofocus}
+        .label=${this.label ??
+        this.hass.localize(
+          "ui.components.entity.entity-attribute-picker.attribute"
+        )}
+        .disabled=${this.disabled || !this.entityId}
         .allowCustomValue=${this.allowCustomValue}
-        attr-for-value="bind-value"
-        ${comboBoxRenderer(rowRenderer)}
+        item-value-path="value"
+        item-label-path="label"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
-        <paper-input
-          .autofocus=${this.autofocus}
-          .label=${this.label ??
-          this.hass.localize(
-            "ui.components.entity.entity-attribute-picker.attribute"
-          )}
-          .value=${this._value ? formatAttributeName(this._value) : ""}
-          .disabled=${this.disabled || !this.entityId}
-          class="input"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="off"
-          spellcheck="false"
-        >
-          <div class="suffix" slot="suffix">
-            ${this.value
-              ? html`
-                  <ha-icon-button
-                    .label=${this.hass.localize(
-                      "ui.components.entity.entity-picker.clear"
-                    )}
-                    .path=${mdiClose}
-                    class="clear-button"
-                    tabindex="-1"
-                    @click=${this._clearValue}
-                    no-ripple
-                  ></ha-icon-button>
-                `
-              : ""}
-
-            <ha-icon-button
-              .label=${this.hass.localize(
-                "ui.components.entity.entity-attribute-picker.show_attributes"
-              )}
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-              class="toggle-button"
-              tabindex="-1"
-            ></ha-icon-button>
-          </div>
-        </paper-input>
-      </vaadin-combo-box-light>
+      </ha-combo-box>
     `;
   }
 
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    this._setValue("");
-  }
-
-  private get _value() {
-    return this.value;
-  }
-
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    const newValue = ev.detail.value;
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .suffix {
-        display: flex;
-      }
-      ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 0px 2px;
-        color: var(--secondary-text-color);
-      }
-      [hidden] {
-        display: none;
-      }
-    `;
+    this.value = ev.detail.value;
   }
 }
 

src/components/ha-combo-box.ts

@@ -52,9 +52,6 @@ registerStyles(
   `
 );
 
-const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) =>
-  html`<mwc-list-item>${item}</mwc-list-item>`;
-
 @customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -112,7 +109,7 @@ export class HaComboBox extends LitElement {
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
-        ${comboBoxRenderer(this.renderer || defaultRowRenderer)}
+        ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
@@ -147,6 +144,13 @@ export class HaComboBox extends LitElement {
     `;
   }
 
+  private _defaultRowRenderer: ComboBoxLitRenderer<
+    string | Record<string, any>
+  > = (item) =>
+    html`<mwc-list-item>
+      ${this.itemLabelPath ? item[this.itemLabelPath] : item}
+    </mwc-list-item>`;
+
   private _clearValue(ev: Event) {
     ev.stopPropagation();
     fireEvent(this, "value-changed", { value: undefined });

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -24,7 +24,7 @@ export const handleChangeEvent = (
   ev: CustomEvent
 ) => {
   ev.stopPropagation();
-  const name = (ev.target as any)?.name;
+  const name = (ev.currentTarget as any)?.name;
   if (!name) {
     return;
   }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -57,7 +57,7 @@ export interface TriggerElement extends LitElement {
 
 export const handleChangeEvent = (element: TriggerElement, ev: CustomEvent) => {
   ev.stopPropagation();
-  const name = (ev.target as any)?.name;
+  const name = (ev.currentTarget as any)?.name;
   if (!name) {
     return;
   }

src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts

@@ -175,7 +175,7 @@ export class HuiEntityCardEditor
     if (!this._config || !this.hass) {
       return;
     }
-    const target = ev.target! as EditorTarget;
+    const target = ev.currentTarget! as EditorTarget;
 
     if (
       this[`_${target.configValue}`] === target.value ||

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -199,7 +199,8 @@ export class HuiWeatherForecastCardEditor
     if (!this._config || !this.hass) {
       return;
     }
-    const target = ev.target! as EditorTarget;
+    const target = ev.currentTarget! as EditorTarget;
+
     if (this[`_${target.configValue}`] === target.value) {
       return;
     }

src/panels/lovelace/editor/types.ts

@@ -38,12 +38,12 @@ export interface ConfigError {
   message: string;
 }
 
-export interface EntitiesEditorEvent {
-  detail?: {
+export interface EntitiesEditorEvent extends CustomEvent {
+  detail: {
     entities?: EntityConfig[];
     item?: any;
   };
-  target?: EventTarget;
+  target: EventTarget | null;
 }
 
 export interface EditorTarget extends EventTarget {