Create generic picker component (#25464)

* Create generic combo-box

* Fix focus

* Delete entity combo-box

* Rename components

* Create generic picker

* Fix undefined and placeholder

* Fix labels

* Fix icon and search

* Add missing hideClearIcon property to entity picker

* Make search string optional

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

@@ -4,8 +4,8 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import type { HaEntityComboBoxEntityFilterFunc } from "./ha-entity-combo-box";
 import "./ha-entity-picker";
+import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -72,7 +72,7 @@ class HaEntitiesPicker extends LitElement {
   public excludeEntities?: string[];
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 

src/components/entity/ha-entity-combo-box.ts

@@ -1,514 +0,0 @@
-import { mdiMagnify, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import Fuse from "fuse.js";
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceName } from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityName } from "../../common/entity/compute_entity_name";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import { isValidEntityId } from "../../common/entity/valid_entity_id";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
-import { computeRTL } from "../../common/util/compute_rtl";
-import { domainToName } from "../../data/integration";
-import type { HelperDomain } from "../../panels/config/helpers/const";
-import { isHelperDomain } from "../../panels/config/helpers/const";
-import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
-import { HaFuse } from "../../resources/fuse";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-import "../ha-combo-box-item";
-import "../ha-icon-button";
-import "../ha-svg-icon";
-import "./state-badge";
-
-interface EntityComboBoxItem {
-  // Force empty label to always display empty value by default in the search field
-  id: string;
-  label: "";
-  primary: string;
-  secondary?: string;
-  domain_name?: string;
-  search_labels?: string[];
-  sorting_label?: string;
-  icon_path?: string;
-  stateObj?: HassEntity;
-}
-
-export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
-
-const CREATE_ID = "___create-new-entity___";
-const NO_ENTITIES_ID = "___no-entities___";
-
-@customElement("ha-entity-combo-box")
-export class HaEntityComboBox extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  // eslint-disable-next-line lit/no-native-attributes
-  @property({ type: Boolean }) public autofocus = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property({ type: Boolean, attribute: "allow-custom-entity" })
-  public allowCustomEntity;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public helper?: string;
-
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
-
-  /**
-   * Show entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  /**
-   * Show only entities with these unit of measuments.
-   * @type {Array}
-   * @attr include-unit-of-measurement
-   */
-  @property({ type: Array, attribute: "include-unit-of-measurement" })
-  public includeUnitOfMeasurement?: string[];
-
-  /**
-   * List of allowed entities to show.
-   * @type {Array}
-   * @attr include-entities
-   */
-  @property({ type: Array, attribute: "include-entities" })
-  public includeEntities?: string[];
-
-  /**
-   * List of entities to be excluded.
-   * @type {Array}
-   * @attr exclude-entities
-   */
-  @property({ type: Array, attribute: "exclude-entities" })
-  public excludeEntities?: string[];
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
-
-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @state() private _opened = false;
-
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  public async open() {
-    await this.updateComplete;
-    await this.comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
-
-  private _initialItems = false;
-
-  private _items: EntityComboBoxItem[] = [];
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    this.hass.loadBackendTranslation("title");
-  }
-
-  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
-    item,
-    { index }
-  ) => {
-    const showEntityId = this.hass.userData?.showEntityIdPicker;
-
-    return html`
-      <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
-        ${item.icon_path
-          ? html`
-              <ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>
-            `
-          : html`
-              <state-badge
-                slot="start"
-                .stateObj=${item.stateObj}
-                .hass=${this.hass}
-              ></state-badge>
-            `}
-        <span slot="headline">${item.primary}</span>
-        ${item.secondary
-          ? html`<span slot="supporting-text">${item.secondary}</span>`
-          : nothing}
-        ${item.stateObj && showEntityId
-          ? html`
-              <span slot="supporting-text" class="code">
-                ${item.stateObj.entity_id}
-              </span>
-            `
-          : nothing}
-        ${item.domain_name && !showEntityId
-          ? html`
-              <div slot="trailing-supporting-text" class="domain">
-                ${item.domain_name}
-              </div>
-            `
-          : nothing}
-      </ha-combo-box-item>
-    `;
-  };
-
-  private _getItems = memoizeOne(
-    (
-      _opened: boolean,
-      hass: this["hass"],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      entityFilter: this["entityFilter"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
-      includeEntities: this["includeEntities"],
-      excludeEntities: this["excludeEntities"],
-      createDomains: this["createDomains"]
-    ): EntityComboBoxItem[] => {
-      let items: EntityComboBoxItem[] = [];
-
-      let entityIds = Object.keys(hass.states);
-
-      const createItems = createDomains?.length
-        ? createDomains.map((domain) => {
-            const primary = hass.localize(
-              "ui.components.entity.entity-picker.create_helper",
-              {
-                domain: isHelperDomain(domain)
-                  ? hass.localize(
-                      `ui.panel.config.helpers.types.${domain as HelperDomain}`
-                    )
-                  : domainToName(hass.localize, domain),
-              }
-            );
-
-            return {
-              id: CREATE_ID + domain,
-              label: "",
-              primary: primary,
-              secondary: this.hass.localize(
-                "ui.components.entity.entity-picker.new_entity"
-              ),
-              icon_path: mdiPlus,
-            } satisfies EntityComboBoxItem;
-          })
-        : [];
-
-      if (!entityIds.length) {
-        return [
-          {
-            id: NO_ENTITIES_ID,
-            label: "",
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
-      }
-
-      if (includeEntities) {
-        entityIds = entityIds.filter((entityId) =>
-          includeEntities.includes(entityId)
-        );
-      }
-
-      if (excludeEntities) {
-        entityIds = entityIds.filter(
-          (entityId) => !excludeEntities.includes(entityId)
-        );
-      }
-
-      if (includeDomains) {
-        entityIds = entityIds.filter((eid) =>
-          includeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      if (excludeDomains) {
-        entityIds = entityIds.filter(
-          (eid) => !excludeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      const isRTL = computeRTL(this.hass);
-
-      items = entityIds
-        .map<EntityComboBoxItem>((entityId) => {
-          const stateObj = hass!.states[entityId];
-
-          const { area, device } = getEntityContext(stateObj, hass);
-
-          const friendlyName = computeStateName(stateObj); // Keep this for search
-          const entityName = computeEntityName(stateObj, hass);
-          const deviceName = device ? computeDeviceName(device) : undefined;
-          const areaName = area ? computeAreaName(area) : undefined;
-
-          const domainName = domainToName(
-            this.hass.localize,
-            computeDomain(entityId)
-          );
-
-          const primary = entityName || deviceName || entityId;
-          const secondary = [areaName, entityName ? deviceName : undefined]
-            .filter(Boolean)
-            .join(isRTL ? " ◂ " : " ▸ ");
-
-          return {
-            id: entityId,
-            label: "",
-            primary: primary,
-            secondary: secondary,
-            domain_name: domainName,
-            sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
-            search_labels: [
-              entityName,
-              deviceName,
-              areaName,
-              domainName,
-              friendlyName,
-              entityId,
-            ].filter(Boolean) as string[],
-            stateObj: stateObj,
-          };
-        })
-        .sort((entityA, entityB) =>
-          caseInsensitiveStringCompare(
-            entityA.sorting_label!,
-            entityB.sorting_label!,
-            this.hass.locale.language
-          )
-        );
-
-      if (includeDeviceClasses) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj?.attributes.device_class &&
-              includeDeviceClasses.includes(
-                item.stateObj.attributes.device_class
-              ))
-        );
-      }
-
-      if (includeUnitOfMeasurement) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj?.attributes.unit_of_measurement &&
-              includeUnitOfMeasurement.includes(
-                item.stateObj.attributes.unit_of_measurement
-              ))
-        );
-      }
-
-      if (entityFilter) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj && entityFilter!(item.stateObj))
-        );
-      }
-
-      if (!items.length) {
-        return [
-          {
-            id: NO_ENTITIES_ID,
-            label: "",
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
-      }
-
-      if (createItems?.length) {
-        items.push(...createItems);
-      }
-
-      return items;
-    }
-  );
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    if (
-      changedProps.has("value") ||
-      changedProps.has("label") ||
-      changedProps.has("disabled")
-    ) {
-      return true;
-    }
-    return !(!changedProps.has("_opened") && this._opened);
-  }
-
-  public willUpdate(changedProps: PropertyValues) {
-    if (!this._initialItems || (changedProps.has("_opened") && this._opened)) {
-      this._items = this._getItems(
-        this._opened,
-        this.hass,
-        this.includeDomains,
-        this.excludeDomains,
-        this.entityFilter,
-        this.includeDeviceClasses,
-        this.includeUnitOfMeasurement,
-        this.includeEntities,
-        this.excludeEntities,
-        this.createDomains
-      );
-      if (this._initialItems) {
-        this.comboBox.filteredItems = this._items;
-      }
-      this._initialItems = true;
-    }
-
-    if (changedProps.has("createDomains") && this.createDomains?.length) {
-      this.hass.loadFragmentTranslation("config");
-    }
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-combo-box
-        item-id-path="id"
-        item-value-path="id"
-        item-label-path="label"
-        .hass=${this.hass}
-        .value=${this._value}
-        .label=${this.label === undefined
-          ? this.hass.localize("ui.components.entity.entity-picker.entity")
-          : this.label}
-        .helper=${this.helper}
-        .allowCustomValue=${this.allowCustomEntity}
-        .filteredItems=${this._items}
-        .renderer=${this._rowRenderer}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .hideClearIcon=${this.hideClearIcon}
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
-      >
-      </ha-combo-box>
-    `;
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
-    ev.stopPropagation();
-    // Clear the input field to prevent showing the old value next time
-    this.comboBox.setTextFieldValue("");
-    const newValue = ev.detail.value?.trim();
-
-    if (newValue && newValue.startsWith(CREATE_ID)) {
-      const domain = newValue.substring(CREATE_ID.length);
-      showHelperDetailDialog(this, {
-        domain,
-        dialogClosedCallback: (item) => {
-          if (item.entityId) this._setValue(item.entityId);
-        },
-      });
-      return;
-    }
-
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _fuseIndex = memoizeOne((states: EntityComboBoxItem[]) =>
-    Fuse.createIndex(["search_labels"], states)
-  );
-
-  private _filterChanged(ev: CustomEvent): void {
-    if (!this._opened) return;
-
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value.trim().toLowerCase() as string;
-
-    const index = this._fuseIndex(this._items);
-    const fuse = new HaFuse(this._items, {}, index);
-
-    const results = fuse.multiTermsSearch(filterString);
-    if (results) {
-      if (results.length === 0) {
-        target.filteredItems = [
-          {
-            id: NO_ENTITIES_ID,
-            label: "",
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            icon_path: mdiMagnify,
-          },
-        ] as EntityComboBoxItem[];
-      } else {
-        target.filteredItems = results.map((result) => result.item);
-      }
-    } else {
-      target.filteredItems = this._items;
-    }
-  }
-
-  private _setValue(value: string | undefined) {
-    if (!value || !isValidEntityId(value)) {
-      return;
-    }
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-    }, 0);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-entity-combo-box": HaEntityComboBox;
-  }
-}

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

@@ -1,34 +1,42 @@
-import { mdiClose, mdiMenuDown, mdiShape } from "@mdi/js";
+import { mdiPlus, mdiShape } from "@mdi/js";
-import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import {
+import type { HassEntity } from "home-assistant-js-websocket";
-  css,
+import { html, LitElement, nothing, type PropertyValues } from "lit";
-  html,
+import { customElement, property, query } from "lit/decorators";
-  LitElement,
+import memoizeOne from "memoize-one";
-  nothing,
-  type CSSResultGroup,
-  type PropertyValues,
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { computeEntityName } from "../../common/entity/compute_entity_name";
+import { computeStateName } from "../../common/entity/compute_state_name";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
-import { debounce } from "../../common/util/debounce";
+import { domainToName } from "../../data/integration";
+import {
+  isHelperDomain,
+  type HelperDomain,
+} from "../../panels/config/helpers/const";
+import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
 import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
-import "../ha-icon-button";
+import "../ha-generic-picker";
-import type { HaMdListItem } from "../ha-md-list-item";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
-import "./ha-entity-combo-box";
-import type {
-  HaEntityComboBox,
-  HaEntityComboBoxEntityFilterFunc,
-} from "./ha-entity-combo-box";
 import "./state-badge";
 
+interface EntityComboBoxItem extends PickerComboBoxItem {
+  domain_name?: string;
+  stateObj?: HassEntity;
+}
+
+export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+
+const CREATE_ID = "___create-new-entity___";
+
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -51,6 +59,9 @@ export class HaEntityPicker extends LitElement {
 
   @property() public placeholder?: string;
 
+  @property({ type: String, attribute: "search-label" })
+  public searchLabel?: string;
+
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 
   /**
@@ -102,16 +113,12 @@ export class HaEntityPicker extends LitElement {
   public excludeEntities?: string[];
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
-  @query("#anchor") private _anchor?: HaMdListItem;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  @query("#input") private _input?: HaEntityComboBox;
-
-  @state() private _opened = false;
 
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
@@ -119,39 +126,19 @@ export class HaEntityPicker extends LitElement {
     this.hass.loadBackendTranslation("title");
   }
 
-  private _renderContent() {
+  private _valueRenderer: PickerValueRenderer = (value) => {
-    const entityId = this.value || "";
+    const entityId = value || "";
-
-    if (!this.value) {
-      return html`
-        <span slot="headline" class="placeholder"
-          >${this.placeholder ??
-          this.hass.localize(
-            "ui.components.entity.entity-picker.placeholder"
-          )}</span
-        >
-        <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
-      `;
-    }
 
     const stateObj = this.hass.states[entityId];
 
-    const showClearIcon =
-      !this.required && !this.disabled && !this.hideClearIcon;
-
     if (!stateObj) {
       return html`
-        <ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiShape}
+          style="margin: 0 4px"
+        ></ha-svg-icon>
         <span slot="headline">${entityId}</span>
-        ${showClearIcon
-          ? html`<ha-icon-button
-              class="clear"
-              slot="end"
-              @click=${this._clear}
-              .path=${mdiClose}
-            ></ha-icon-button>`
-          : nothing}
-        <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
       `;
     }
 
@@ -176,169 +163,282 @@ export class HaEntityPicker extends LitElement {
       ></state-badge>
       <span slot="headline">${primary}</span>
       <span slot="supporting-text">${secondary}</span>
-      ${showClearIcon
-        ? html`<ha-icon-button
-            class="clear"
-            slot="end"
-            @click=${this._clear}
-            .path=${mdiClose}
-          ></ha-icon-button>`
-        : nothing}
-      <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
     `;
+  };
+
+  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
+    item,
+    { index }
+  ) => {
+    const showEntityId = this.hass.userData?.showEntityIdPicker;
+
+    return html`
+      <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
+        ${item.icon_path
+          ? html`
+              <ha-svg-icon
+                slot="start"
+                style="margin: 0 4px"
+                .path=${item.icon_path}
+              ></ha-svg-icon>
+            `
+          : html`
+              <state-badge
+                slot="start"
+                .stateObj=${item.stateObj}
+                .hass=${this.hass}
+              ></state-badge>
+            `}
+        <span slot="headline">${item.primary}</span>
+        ${item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing}
+        ${item.stateObj && showEntityId
+          ? html`
+              <span slot="supporting-text" class="code">
+                ${item.stateObj.entity_id}
+              </span>
+            `
+          : nothing}
+        ${item.domain_name && !showEntityId
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${item.domain_name}
+              </div>
+            `
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
+
+  private _getAdditionalItems = () =>
+    this._getCreateItems(this.hass.localize, this.createDomains);
+
+  private _getCreateItems = memoizeOne(
+    (
+      localize: this["hass"]["localize"],
+      createDomains: this["createDomains"]
+    ) => {
+      if (!createDomains?.length) {
+        return [];
       }
 
+      return createDomains.map((domain) => {
+        const primary = localize(
+          "ui.components.entity.entity-picker.create_helper",
+          {
+            domain: isHelperDomain(domain)
+              ? localize(
+                  `ui.panel.config.helpers.types.${domain as HelperDomain}`
+                )
+              : domainToName(localize, domain),
+          }
+        );
+
+        return {
+          id: CREATE_ID + domain,
+          primary: primary,
+          secondary: localize("ui.components.entity.entity-picker.new_entity"),
+          icon_path: mdiPlus,
+        } satisfies EntityComboBoxItem;
+      });
+    }
+  );
+
+  private _getItems = () =>
+    this._getEntities(
+      this.hass,
+      this.includeDomains,
+      this.excludeDomains,
+      this.entityFilter,
+      this.includeDeviceClasses,
+      this.includeUnitOfMeasurement,
+      this.includeEntities,
+      this.excludeEntities
+    );
+
+  private _getEntities = memoizeOne(
+    (
+      hass: this["hass"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      entityFilter: this["entityFilter"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
+      includeEntities: this["includeEntities"],
+      excludeEntities: this["excludeEntities"]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];
+
+      let entityIds = Object.keys(hass.states);
+
+      if (includeEntities) {
+        entityIds = entityIds.filter((entityId) =>
+          includeEntities.includes(entityId)
+        );
+      }
+
+      if (excludeEntities) {
+        entityIds = entityIds.filter(
+          (entityId) => !excludeEntities.includes(entityId)
+        );
+      }
+
+      if (includeDomains) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      if (excludeDomains) {
+        entityIds = entityIds.filter(
+          (eid) => !excludeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      const isRTL = computeRTL(this.hass);
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass!.states[entityId];
+
+        const { area, device } = getEntityContext(stateObj, hass);
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const domainName = domainToName(
+          this.hass.localize,
+          computeDomain(entityId)
+        );
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClasses) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  );
+
   protected render() {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.entity.entity-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.entity.entity-picker.no_match"
+    );
+
     return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <ha-generic-picker
-      <div class="container">
-        ${!this._opened
-          ? html`<ha-combo-box-item
-              .disabled=${this.disabled}
-              id="anchor"
-              type="button"
-              compact
-              @click=${this._showPicker}
-            >
-              ${this._renderContent()}
-            </ha-combo-box-item>`
-          : html`<ha-entity-combo-box
-              id="input"
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-              .allowCustomEntity=${this.allowCustomEntity}
+        .allowCustomValue=${this.allowCustomEntity}
-              .label=${this.hass.localize("ui.common.search")}
+        .label=${this.label}
+        .searchLabel=${this.searchLabel}
+        .notFoundLabel=${notFoundLabel}
+        .placeholder=${placeholder}
         .value=${this.value}
-              .createDomains=${this.createDomains}
+        .rowRenderer=${this._rowRenderer}
-              .includeDomains=${this.includeDomains}
+        .getItems=${this._getItems}
-              .excludeDomains=${this.excludeDomains}
+        .getAdditionalItems=${this._getAdditionalItems}
-              .includeDeviceClasses=${this.includeDeviceClasses}
+        .hideClearIcon=${this.hideClearIcon}
-              .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
+        .valueRenderer=${this._valueRenderer}
-              .includeEntities=${this.includeEntities}
+        @value-changed=${this._valueChanged}
-              .excludeEntities=${this.excludeEntities}
+      >
-              .entityFilter=${this.entityFilter}
+      </ha-generic-picker>
-              hide-clear-icon
-              @opened-changed=${this._debounceOpenedChanged}
-              @input=${stopPropagation}
-            ></ha-entity-combo-box>`}
-        ${this._renderHelper()}
-      </div>
     `;
   }
 
-  private _renderHelper() {
+  public async open() {
-    return this.helper
+    this._picker?.open();
-      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-      : nothing;
   }
 
-  private _clear(e) {
+  private _valueChanged(ev) {
-    e.stopPropagation();
+    ev.stopPropagation();
-    this.value = undefined;
+    const value = ev.detail.value;
-    fireEvent(this, "value-changed", { value: undefined });
-    fireEvent(this, "change");
-  }
 
-  private async _showPicker() {
+    if (!value) {
-    if (this.disabled) {
+      this._setValue(undefined);
       return;
     }
-    this._opened = true;
+
-    await this.updateComplete;
+    if (value.startsWith(CREATE_ID)) {
-    this._input?.focus();
+      const domain = value.substring(CREATE_ID.length);
-    this._input?.open();
+
+      showHelperDetailDialog(this, {
+        domain,
+        dialogClosedCallback: (item) => {
+          if (item.entityId) this._setValue(item.entityId);
+        },
+      });
+      return;
     }
 
-  // Multiple calls to _openedChanged can be triggered in quick succession
+    if (!isValidEntityId(value)) {
-  // when the menu is opened
+      return;
-  private _debounceOpenedChanged = debounce(
-    (ev) => this._openedChanged(ev),
-    10
-  );
-
-  private async _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    const opened = ev.detail.value;
-    if (this._opened && !opened) {
-      this._opened = false;
-      await this.updateComplete;
-      this._anchor?.focus();
-    }
     }
 
-  static get styles(): CSSResultGroup {
+    this._setValue(value);
-    return [
-      css`
-        mwc-menu-surface {
-          --mdc-menu-min-width: 100%;
-        }
-        .container {
-          position: relative;
-          display: block;
-        }
-        ha-combo-box-item {
-          background-color: var(--mdc-text-field-fill-color, whitesmoke);
-          border-radius: 4px;
-          border-end-end-radius: 0;
-          border-end-start-radius: 0;
-          --md-list-item-one-line-container-height: 56px;
-          --md-list-item-two-line-container-height: 56px;
-          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: 8px;
-          --md-list-item-leading-space: 8px;
-          --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
-          /* Remove the default focus ring */
-          --md-focus-ring-width: 0px;
-          --md-focus-ring-duration: 0s;
   }
 
-        /* Add Similar focus style as the text field */
+  private _setValue(value: string | undefined) {
-        ha-combo-box-item:after {
+    this.value = value;
-          display: block;
-          content: "";
-          position: absolute;
-          pointer-events: none;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 1px;
-          width: 100%;
-          background-color: var(
-            --mdc-text-field-idle-line-color,
-            rgba(0, 0, 0, 0.42)
-          );
-          transform:
-            height 180ms ease-in-out,
-            background-color 180ms ease-in-out;
-        }
 
-        ha-combo-box-item:focus:after {
+    fireEvent(this, "value-changed", { value });
-          height: 2px;
+    fireEvent(this, "change");
-          background-color: var(--mdc-theme-primary);
-        }
-
-        ha-combo-box-item ha-svg-icon[slot="start"] {
-          margin: 0 4px;
-        }
-        .clear {
-          margin: 0 -8px;
-          --mdc-icon-button-size: 32px;
-          --mdc-icon-size: 20px;
-        }
-        .edit {
-          --mdc-icon-size: 20px;
-          width: 32px;
-        }
-        label {
-          display: block;
-          margin: 0 0 8px;
-        }
-        .placeholder {
-          color: var(--secondary-text-color);
-          padding: 0 8px;
-        }
-      `,
-    ];
   }
 }
 

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

@@ -28,11 +28,11 @@ import {
 import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-icon-button";
+import "../ha-input-helper-text";
 import type { HaMdListItem } from "../ha-md-list-item";
 import "../ha-svg-icon";
-import "./ha-entity-combo-box";
-import type { HaEntityComboBox } from "./ha-entity-combo-box";
 import "./ha-statistic-combo-box";
+import type { HaStatisticComboBox } from "./ha-statistic-combo-box";
 import "./state-badge";
 
 interface StatisticItem {
@@ -116,7 +116,7 @@ export class HaStatisticPicker extends LitElement {
 
   @query("#anchor") private _anchor?: HaMdListItem;
 
-  @query("#input") private _input?: HaEntityComboBox;
+  @query("#input") private _input?: HaStatisticComboBox;
 
   @state() private _opened = false;
 

src/components/ha-area-picker.ts

@@ -369,7 +369,7 @@ export class HaAreaPicker extends LitElement {
       ) || []
     );
     if (filteredItems.length === 0) {
-      if (!this.noAdd) {
+      if (this.noAdd) {
         this.comboBox.filteredItems = [
           {
             area_id: NO_ITEMS_ID,

src/components/ha-combo-box.ts

@@ -246,8 +246,8 @@ export class HaComboBox extends LitElement {
     // delay this so we can handle click event for toggle button before setting _opened
     setTimeout(() => {
       this.opened = opened;
-    }, 0);
       fireEvent(this, "opened-changed", { value: ev.detail.value });
+    }, 0);
 
     if (opened) {
       const overlay = document.querySelector<HTMLElement>(

src/components/ha-generic-picker.ts

@@ -0,0 +1,174 @@
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
+import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import type { HomeAssistant } from "../types";
+import "./ha-combo-box-item";
+import "./ha-icon-button";
+import "./ha-input-helper-text";
+import "./ha-picker-combo-box";
+import type {
+  HaPickerComboBox,
+  PickerComboBoxItem,
+} from "./ha-picker-combo-box";
+import "./ha-picker-field";
+import type { HaPickerField, PickerValueRenderer } from "./ha-picker-field";
+import "./ha-svg-icon";
+
+@customElement("ha-generic-picker")
+export class HaGenericPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ type: Boolean, attribute: "allow-custom-value" })
+  public allowCustomValue;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ type: String, attribute: "search-label" })
+  public searchLabel?: string;
+
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
+
+  @property({ attribute: false, type: Array })
+  public getItems?: () => PickerComboBoxItem[];
+
+  @property({ attribute: false, type: Array })
+  public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
+
+  @property({ attribute: false })
+  public rowRenderer?: ComboBoxLitRenderer<PickerComboBoxItem>;
+
+  @property({ attribute: false })
+  public valueRenderer?: PickerValueRenderer;
+
+  @property({ attribute: "not-found-label", type: String })
+  public notFoundLabel?: string;
+
+  @query("ha-picker-field") private _field?: HaPickerField;
+
+  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
+
+  @state() private _opened = false;
+
+  protected render() {
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <div class="container">
+        ${!this._opened
+          ? html`
+              <ha-picker-field
+                type="button"
+                compact
+                @click=${this.open}
+                @clear=${this._clear}
+                .placeholder=${this.placeholder}
+                .value=${this.value}
+                .required=${this.required}
+                .disabled=${this.disabled}
+                .hideClearIcon=${this.hideClearIcon}
+                .valueRenderer=${this.valueRenderer}
+              >
+              </ha-picker-field>
+            `
+          : html`
+              <ha-picker-combo-box
+                .hass=${this.hass}
+                .autofocus=${this.autofocus}
+                .allowCustomValue=${this.allowCustomValue}
+                .label=${this.searchLabel ??
+                this.hass.localize("ui.common.search")}
+                .value=${this.value}
+                hide-clear-icon
+                @opened-changed=${this._openedChanged}
+                @value-changed=${this._valueChanged}
+                .rowRenderer=${this.rowRenderer}
+                .notFoundLabel=${this.notFoundLabel}
+                .getItems=${this.getItems}
+                .getAdditionalItems=${this.getAdditionalItems}
+              ></ha-picker-combo-box>
+            `}
+        ${this._renderHelper()}
+      </div>
+    `;
+  }
+
+  private _renderHelper() {
+    return this.helper
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      : nothing;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+    if (!value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
+  private _clear(e) {
+    e.stopPropagation();
+    this._setValue(undefined);
+  }
+
+  private _setValue(value: string | undefined) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+  }
+
+  public async open() {
+    if (this.disabled) {
+      return;
+    }
+    this._opened = true;
+    await this.updateComplete;
+    this._comboBox?.focus();
+    this._comboBox?.open();
+  }
+
+  private async _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
+    const opened = ev.detail.value;
+    if (this._opened && !opened) {
+      this._opened = false;
+      await this.updateComplete;
+      this._field?.focus();
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        .container {
+          position: relative;
+          display: block;
+        }
+        label {
+          display: block;
+          margin: 0 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-generic-picker": HaGenericPicker;
+  }
+}

src/components/ha-picker-combo-box.ts

@@ -0,0 +1,260 @@
+import { mdiMagnify } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import Fuse from "fuse.js";
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { HaFuse } from "../resources/fuse";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
+import "./ha-icon";
+
+export interface PickerComboBoxItem {
+  id: string;
+  primary: string;
+  secondary?: string;
+  search_labels?: string[];
+  sorting_label?: string;
+  icon_path?: string;
+  icon?: string;
+}
+
+// Hack to force empty label to always display empty value by default in the search field
+export interface PickerComboBoxItemWithLabel extends PickerComboBoxItem {
+  label: "";
+}
+
+const NO_MATCHING_ITEMS_FOUND_ID = "___no_matching_items_found___";
+
+const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
+  item
+) => html`
+  <ha-combo-box-item type="button" compact>
+    ${item.icon
+      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+      : item.icon_path
+        ? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
+        : nothing}
+    <span slot="headline">${item.primary}</span>
+    ${item.secondary
+      ? html`<span slot="supporting-text">${item.secondary}</span>`
+      : nothing}
+  </ha-combo-box-item>
+`;
+
+@customElement("ha-picker-combo-box")
+export class HaPickerComboBox extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ type: Boolean, attribute: "allow-custom-value" })
+  public allowCustomValue;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false, type: Array })
+  public getItems?: () => PickerComboBoxItem[];
+
+  @property({ attribute: false, type: Array })
+  public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
+
+  @property({ attribute: false })
+  public rowRenderer?: ComboBoxLitRenderer<PickerComboBoxItem>;
+
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
+
+  @property({ attribute: "not-found-label", type: String })
+  public notFoundLabel?: string;
+
+  @state() private _opened = false;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
+  }
+
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
+  }
+
+  private _initialItems = false;
+
+  private _items: PickerComboBoxItemWithLabel[] = [];
+
+  private _defaultNotFoundItem = memoizeOne(
+    (
+      label: this["notFoundLabel"],
+      localize: LocalizeFunc
+    ): PickerComboBoxItemWithLabel => ({
+      id: NO_MATCHING_ITEMS_FOUND_ID,
+      primary: label || localize("ui.components.combo-box.no_match"),
+      icon_path: mdiMagnify,
+      label: "",
+    })
+  );
+
+  private _getAdditionalItems = (searchString?: string) => {
+    const items = this.getAdditionalItems?.(searchString) || [];
+
+    return items.map<PickerComboBoxItemWithLabel>((item) => ({
+      ...item,
+      label: "",
+    }));
+  };
+
+  private _getItems = (): PickerComboBoxItemWithLabel[] => {
+    const items = this.getItems ? this.getItems() : [];
+
+    const sortedItems = items
+      .map<PickerComboBoxItemWithLabel>((item) => ({
+        ...item,
+        label: "",
+      }))
+      .sort((entityA, entityB) =>
+        caseInsensitiveStringCompare(
+          entityA.sorting_label!,
+          entityB.sorting_label!,
+          this.hass.locale.language
+        )
+      );
+
+    if (!sortedItems.length) {
+      sortedItems.push(
+        this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
+      );
+    }
+
+    const additionalItems = this._getAdditionalItems();
+    sortedItems.push(...additionalItems);
+    return sortedItems;
+  };
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    if (
+      changedProps.has("value") ||
+      changedProps.has("label") ||
+      changedProps.has("disabled")
+    ) {
+      return true;
+    }
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  public willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("_opened") && this._opened) {
+      this._items = this._getItems();
+      if (this._initialItems) {
+        this.comboBox.filteredItems = this._items;
+      }
+      this._initialItems = true;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="label"
+        .hass=${this.hass}
+        .value=${this._value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .allowCustomValue=${this.allowCustomValue}
+        .filteredItems=${this._items}
+        .renderer=${this.rowRenderer || DEFAULT_ROW_RENDERER}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .hideClearIcon=${this.hideClearIcon}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    ev.stopPropagation();
+    if (ev.detail.value !== this._opened) {
+      this._opened = ev.detail.value;
+      fireEvent(this, "opened-changed", { value: this._opened });
+    }
+  }
+
+  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+    ev.stopPropagation();
+    // Clear the input field to prevent showing the old value next time
+    this.comboBox.setTextFieldValue("");
+    const newValue = ev.detail.value?.trim();
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _fuseIndex = memoizeOne((states: PickerComboBoxItem[]) =>
+    Fuse.createIndex(["search_labels"], states)
+  );
+
+  private _filterChanged(ev: CustomEvent): void {
+    if (!this._opened) return;
+
+    const target = ev.target as HaComboBox;
+    const searchString = ev.detail.value.trim() as string;
+
+    const index = this._fuseIndex(this._items);
+    const fuse = new HaFuse(this._items, {}, index);
+
+    const results = fuse.multiTermsSearch(searchString);
+    if (results) {
+      const items = results.map((result) => result.item);
+      if (items.length === 0) {
+        items.push(
+          this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
+        );
+      }
+      const additionalItems = this._getAdditionalItems(searchString);
+      items.push(...additionalItems);
+      target.filteredItems = items;
+    } else {
+      target.filteredItems = this._items;
+    }
+  }
+
+  private _setValue(value: string | undefined) {
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-picker-combo-box": HaPickerComboBox;
+  }
+}

src/components/ha-picker-field.ts

@@ -0,0 +1,156 @@
+import { mdiClose, mdiMenuDown } from "@mdi/js";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type CSSResultGroup,
+  type TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import "./ha-combo-box-item";
+import type { HaComboBoxItem } from "./ha-combo-box-item";
+import "./ha-icon-button";
+
+declare global {
+  interface HASSDomEvents {
+    clear: undefined;
+  }
+}
+
+export type PickerValueRenderer = (value: string) => TemplateResult<1>;
+
+@customElement("ha-picker-field")
+export class HaPickerField extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
+
+  @property({ attribute: false })
+  public valueRenderer?: PickerValueRenderer;
+
+  @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
+
+  public async focus() {
+    await this.updateComplete;
+    await this.item?.focus();
+  }
+
+  protected render() {
+    const showClearIcon =
+      !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
+
+    return html`
+      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
+        ${this.value
+          ? this.valueRenderer
+            ? this.valueRenderer(this.value)
+            : html`<slot name="headline">${this.value}</slot>`
+          : html`
+              <span slot="headline" class="placeholder">
+                ${this.placeholder}
+              </span>
+            `}
+        ${showClearIcon
+          ? html`
+              <ha-icon-button
+                class="clear"
+                slot="end"
+                @click=${this._clear}
+                .path=${mdiClose}
+              ></ha-icon-button>
+            `
+          : nothing}
+        <ha-svg-icon
+          class="arrow"
+          slot="end"
+          .path=${mdiMenuDown}
+        ></ha-svg-icon>
+      </ha-combo-box-item>
+    `;
+  }
+
+  private _clear(e) {
+    e.stopPropagation();
+    fireEvent(this, "clear");
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        ha-combo-box-item {
+          background-color: var(--mdc-text-field-fill-color, whitesmoke);
+          border-radius: 4px;
+          border-end-end-radius: 0;
+          border-end-start-radius: 0;
+          --md-list-item-one-line-container-height: 56px;
+          --md-list-item-two-line-container-height: 56px;
+          --md-list-item-top-space: 8px;
+          --md-list-item-bottom-space: 8px;
+          --md-list-item-leading-space: 8px;
+          --md-list-item-trailing-space: 8px;
+          --ha-md-list-item-gap: 8px;
+          /* Remove the default focus ring */
+          --md-focus-ring-width: 0px;
+          --md-focus-ring-duration: 0s;
+        }
+
+        /* Add Similar focus style as the text field */
+        ha-combo-box-item:after {
+          display: block;
+          content: "";
+          position: absolute;
+          pointer-events: none;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 1px;
+          width: 100%;
+          background-color: var(
+            --mdc-text-field-idle-line-color,
+            rgba(0, 0, 0, 0.42)
+          );
+          transform:
+            height 180ms ease-in-out,
+            background-color 180ms ease-in-out;
+        }
+
+        ha-combo-box-item:focus:after {
+          height: 2px;
+          background-color: var(--mdc-theme-primary);
+        }
+
+        .clear {
+          margin: 0 -8px;
+          --mdc-icon-button-size: 32px;
+          --mdc-icon-size: 20px;
+        }
+        .arrow {
+          --mdc-icon-size: 20px;
+          width: 32px;
+        }
+
+        .placeholder {
+          color: var(--secondary-text-color);
+          padding: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-picker-field": HaPickerField;
+  }
+}

src/components/ha-target-picker.ts

@@ -39,12 +39,13 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../types";
 import "./device/ha-device-picker";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./entity/ha-entity-combo-box";
+import "./entity/ha-entity-picker";
-import type { HaEntityComboBoxEntityFilterFunc } from "./entity/ha-entity-combo-box";
+import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-floor-picker";
 import { floorDefaultIconPath } from "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
+import "./ha-label-picker";
 import "./ha-svg-icon";
 import "./ha-tooltip";
 
@@ -80,7 +81,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
@@ -384,12 +385,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     if (!this._addMode) {
       return nothing;
     }
+
     return html`<mwc-menu-surface
       open
       .anchor=${this._addContainer}
       @closed=${this._onClosed}
       @opened=${this._onOpened}
-      @opened-changed=${this._openedChanged}
       @input=${stopPropagation}
       >${this._addMode === "area_id"
         ? html`
@@ -408,6 +409,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               .excludeAreas=${ensureArray(this.value?.area_id)}
               .excludeFloors=${ensureArray(this.value?.floor_id)}
               @value-changed=${this._targetPicked}
+              @opened-changed=${this._openedChanged}
               @click=${this._preventDefault}
             ></ha-area-floor-picker>
           `
@@ -426,6 +428,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 .includeDomains=${this.includeDomains}
                 .excludeDevices=${ensureArray(this.value?.device_id)}
                 @value-changed=${this._targetPicked}
+                @opened-changed=${this._openedChanged}
                 @click=${this._preventDefault}
               ></ha-device-picker>
             `
@@ -445,15 +448,19 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .includeDomains=${this.includeDomains}
                   .excludeLabels=${ensureArray(this.value?.label_id)}
                   @value-changed=${this._targetPicked}
+                  @opened-changed=${this._openedChanged}
                   @click=${this._preventDefault}
                 ></ha-label-picker>
               `
             : html`
-                <ha-entity-combo-box
+                <ha-entity-picker
                   .hass=${this.hass}
                   id="input"
                   .type=${"entity_id"}
-                  .label=${this.hass.localize(
+                  .placeholder=${this.hass.localize(
+                    "ui.components.target-picker.add_entity_id"
+                  )}
+                  .searchLabel=${this.hass.localize(
                     "ui.components.target-picker.add_entity_id"
                   )}
                   .entityFilter=${this.entityFilter}
@@ -462,11 +469,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .excludeEntities=${ensureArray(this.value?.entity_id)}
                   .createDomains=${this.createDomains}
                   @value-changed=${this._targetPicked}
+                  @opened-changed=${this._openedChanged}
                   @click=${this._preventDefault}
                   allow-custom-entity
-                ></ha-entity-combo-box>
+                ></ha-entity-picker>
               `}</mwc-menu-surface
-    >`;
+    > `;
   }
 
   private _targetPicked(ev) {
@@ -839,7 +847,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       mwc-menu-surface {
         --mdc-menu-min-width: 100%;
       }
-      ha-entity-combo-box,
+      ha-entity-picker,
       ha-device-picker,
       ha-area-floor-picker {
         display: block;

src/data/logbook.ts

@@ -8,9 +8,9 @@ import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { autoCaseNoun } from "../common/translations/auto_case_noun";
 import type { LocalizeFunc } from "../common/translations/localize";
+import type { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE, UNKNOWN } from "./entity";
-import type { HaEntityComboBoxEntityFilterFunc } from "../components/entity/ha-entity-combo-box";
 
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
 export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
@@ -322,8 +322,9 @@ export const localizeStateMessage = (
   });
 };
 
-export const filterLogbookCompatibleEntities: HaEntityComboBoxEntityFilterFunc =
+export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = (
-  (entity) =>
+  entity
+) =>
   computeStateDomain(entity) !== "sensor" ||
   (entity.attributes.unit_of_measurement === undefined &&
     entity.attributes.state_class === undefined);

src/panels/lovelace/components/hui-entity-editor.ts

@@ -3,9 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { HaEntityComboBoxEntityFilterFunc } from "../../../components/entity/ha-entity-combo-box";
 import "../../../components/entity/ha-entity-picker";
-import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
+import type {
+  HaEntityPicker,
+  HaEntityPickerEntityFilterFunc,
+} from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-sortable";
 import type { HomeAssistant } from "../../../types";
@@ -18,7 +20,7 @@ export class HuiEntityEditor extends LitElement {
   @property({ attribute: false }) public entities?: EntityConfig[];
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property() public label?: string;
 

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -8,8 +8,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefault } from "../../../../common/dom/prevent_default";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
-import type { HaEntityComboBox } from "../../../../components/entity/ha-entity-combo-box";
 import "../../../../components/entity/ha-entity-picker";
+import type { HaEntityPicker } from "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-sortable";
@@ -33,7 +33,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
 
   @query(".add-container", true) private _addContainer?: HTMLDivElement;
 
-  @query("ha-entity-combo-box") private _entityCombobox?: HaEntityComboBox;
+  @query("ha-entity-picker") private _entityPicker?: HaEntityPicker;
 
   @state() private _addMode = false;
 
@@ -144,16 +144,19 @@ export class HuiHeadingBadgesEditor extends LitElement {
         @opened-changed=${this._openedChanged}
         @input=${stopPropagation}
       >
-        <ha-entity-combo-box
+        <ha-entity-picker
           .hass=${this.hass}
           id="input"
-          .label=${this.hass.localize(
+          .placeholder=${this.hass.localize(
+            "ui.components.target-picker.add_entity_id"
+          )}
+          .searchLabel=${this.hass.localize(
             "ui.components.target-picker.add_entity_id"
           )}
           @value-changed=${this._entityPicked}
           @click=${preventDefault}
           allow-custom-entity
-        ></ha-entity-combo-box>
+        ></ha-entity-picker>
       </mwc-menu-surface>
     `;
   }
@@ -167,8 +170,8 @@ export class HuiHeadingBadgesEditor extends LitElement {
     if (!this._addMode) {
       return;
     }
-    await this._entityCombobox?.focus();
+    await this._entityPicker?.focus();
-    await this._entityCombobox?.open();
+    await this._entityPicker?.open();
     this._opened = true;
   }
 

src/resources/fuse.ts

@@ -50,7 +50,7 @@ export class HaFuse<T> extends Fuse<T> {
     search: string,
     options?: FuseSearchOptions
   ): FuseResult<T>[] | null {
-    const terms = search.split(" ");
+    const terms = search.toLowerCase().split(" ");
 
     // @ts-expect-error options is not part of the Fuse type
     const { minMatchCharLength } = this.options as IFuseOptions<T>;

src/translations/en.json

@@ -1150,6 +1150,9 @@
       },
       "form-optional-actions": {
         "add": "Add interaction"
+      },
+      "combo-box": {
+        "no_match": "No matching items found"
       }
     },
     "dialogs": {