Use list item for entity picker (#25176)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
Co-authored-by: Wendelin <w@pe8.at>

landing-page/src/entrypoint.js

@@ -1,3 +1,3 @@
 import "./ha-landing-page";
 
-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");

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 HaEntitiesPickerLight extends LitElement {
@@ -73,7 +73,7 @@ class HaEntitiesPickerLight extends LitElement {
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
+  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
 
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 

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

@@ -0,0 +1,522 @@
+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 { styleMap } from "lit/directives/style-map";
+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";
+
+const FAKE_ENTITY: HassEntity = {
+  entity_id: "",
+  state: "",
+  last_changed: "",
+  last_updated: "",
+  context: { id: "", user_id: null, parent_id: null },
+  attributes: {},
+};
+
+interface EntityComboBoxItem extends HassEntity {
+  // Force empty label to always display empty value by default in the search field
+  label: "";
+  primary: string;
+  secondary?: string;
+  translated_domain?: string;
+  show_entity_id?: boolean;
+  entity_name?: string;
+  area_name?: string;
+  device_name?: string;
+  friendly_name?: string;
+  sorting_label?: string;
+  icon_path?: string;
+}
+
+export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
+
+const CREATE_ID = "___create-new-entity___";
+
+const DOMAIN_STYLE = styleMap({
+  fontSize: "var(--ha-font-size-s)",
+  fontWeight: "var(--ha-font-weight-normal)",
+  lineHeight: "var(--ha-line-height-normal)",
+  alignSelf: "flex-end",
+  maxWidth: "30%",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+});
+
+const ENTITY_ID_STYLE = styleMap({
+  fontFamily: "var(--code-font-family, monospace)",
+  fontSize: "var(--ha-font-size-xs)",
+});
+
+@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 }
+  ) => 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}
+              .hass=${this.hass}
+            ></state-badge>
+          `}
+      <span slot="headline">${item.primary}</span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+      ${item.entity_id && item.show_entity_id
+        ? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
+            >${item.entity_id}</span
+          >`
+        : nothing}
+      ${item.translated_domain && !item.show_entity_id
+        ? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
+            ${item.translated_domain}
+          </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 states: 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 {
+              ...FAKE_ENTITY,
+              label: "",
+              entity_id: CREATE_ID + domain,
+              primary: primary,
+              secondary: this.hass.localize(
+                "ui.components.entity.entity-picker.new_entity"
+              ),
+              icon_path: mdiPlus,
+            } satisfies EntityComboBoxItem;
+          })
+        : [];
+
+      if (!entityIds.length) {
+        return [
+          {
+            ...FAKE_ENTITY,
+            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);
+
+      states = 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 primary = entityName || deviceName || entityId;
+          const secondary = [areaName, entityName ? deviceName : undefined]
+            .filter(Boolean)
+            .join(isRTL ? " ◂ " : " ▸ ");
+
+          const translatedDomain = domainToName(
+            this.hass.localize,
+            computeDomain(entityId)
+          );
+
+          return {
+            ...hass!.states[entityId],
+            label: "",
+            primary: primary,
+            secondary:
+              secondary ||
+              this.hass.localize("ui.components.device-picker.no_area"),
+            translated_domain: translatedDomain,
+            sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
+            entity_name: entityName || deviceName,
+            area_name: areaName,
+            device_name: deviceName,
+            friendly_name: friendlyName,
+            show_entity_id: hass.userData?.showEntityIdPicker,
+          };
+        })
+        .sort((entityA, entityB) =>
+          caseInsensitiveStringCompare(
+            entityA.sorting_label!,
+            entityB.sorting_label!,
+            this.hass.locale.language
+          )
+        );
+
+      if (includeDeviceClasses) {
+        states = states.filter(
+          (stateObj) =>
+            // We always want to include the entity of the current value
+            stateObj.entity_id === this.value ||
+            (stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        states = states.filter(
+          (stateObj) =>
+            // We always want to include the entity of the current value
+            stateObj.entity_id === this.value ||
+            (stateObj.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        states = states.filter(
+          (stateObj) =>
+            // We always want to include the entity of the current value
+            stateObj.entity_id === this.value || entityFilter!(stateObj)
+        );
+      }
+
+      if (!states.length) {
+        return [
+          {
+            ...FAKE_ENTITY,
+            label: "",
+            primary: this.hass!.localize(
+              "ui.components.entity.entity-picker.no_match"
+            ),
+            icon_path: mdiMagnify,
+          },
+          ...createItems,
+        ];
+      }
+
+      if (createItems?.length) {
+        states.push(...createItems);
+      }
+
+      return states;
+    }
+  );
+
+  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-value-path="entity_id"
+        .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(
+      [
+        "entity_name",
+        "device_name",
+        "area_name",
+        "translated_domain",
+        "friendly_name", // for backwards compatibility
+        "entity_id", // for technical search
+      ],
+      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) {
+      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,77 +1,27 @@
-import { mdiMagnify, mdiPlus } from "@mdi/js";
+import { mdiClose, mdiMenuDown, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
-import Fuse from "fuse.js";
+import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
-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 { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
 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 { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { computeRTL } from "../../common/util/compute_rtl";
-import { domainToName } from "../../data/integration";
+import { debounce } from "../../common/util/debounce";
-import type { HelperDomain } from "../../panels/config/helpers/const";
+import type { HomeAssistant } from "../../types";
-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 type { HaMdListItem } from "../ha-md-list-item";
 import "../ha-svg-icon";
+import "./ha-entity-combo-box";
+import type {
+  HaEntityComboBox,
+  HaEntityComboBoxEntityFilterFunc,
+} from "./ha-entity-combo-box";
 import "./state-badge";
 
-const FAKE_ENTITY: HassEntity = {
-  entity_id: "",
-  state: "",
-  last_changed: "",
-  last_updated: "",
-  context: { id: "", user_id: null, parent_id: null },
-  attributes: {},
-};
-
-interface EntityPickerItem extends HassEntity {
-  label: string;
-  primary: string;
-  secondary?: string;
-  translated_domain?: string;
-  show_entity_id?: boolean;
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
-  sorting_label?: string;
-  icon_path?: string;
-}
-
-export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
-
-const CREATE_ID = "___create-new-entity___";
-
-const DOMAIN_STYLE = styleMap({
-  fontSize: "12px",
-  fontWeight: "400",
-  lineHeight: "18px",
-  alignSelf: "flex-end",
-  maxWidth: "30%",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-});
-
-const ENTITY_ID_STYLE = styleMap({
-  fontFamily: "var(--code-font-family, monospace)",
-  fontSize: "11px",
-});
-
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -92,6 +42,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public helper?: string;
 
+  @property() public placeholder?: string;
+
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 
   /**
@@ -143,381 +95,240 @@ export class HaEntityPicker extends LitElement {
   public excludeEntities?: string[];
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
+  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
 
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
-  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
+  @query("#anchor") private _anchor?: HaMdListItem;
+
+  @query("#input") private _input?: HaEntityComboBox;
 
   @state() private _opened = false;
 
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+  private _renderContent() {
+    const entityId = this.value || "";
 
-  public async open() {
+    if (!this.value) {
-    await this.updateComplete;
+      return html`
-    await this.comboBox?.open();
+        <span slot="headline" class="placeholder"
-  }
+          >${this.placeholder ??
-
+          this.hass.localize(
-  public async focus() {
+            "ui.components.entity.entity-picker.placeholder"
-    await this.updateComplete;
+          )}</span
-    await this.comboBox?.focus();
+        >
-  }
+        <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
-
-  private _initialItems = false;
-
-  private _items: EntityPickerItem[] = [];
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    this.hass.loadBackendTranslation("title");
-  }
-
-  private _rowRenderer: ComboBoxLitRenderer<EntityPickerItem> = (
-    item,
-    { index }
-  ) => 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}
-              .hass=${this.hass}
-            ></state-badge>
-          `}
-
-      <span slot="headline">${item.primary} </span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
-      ${item.entity_id && item.show_entity_id
-        ? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
-            >${item.entity_id}</span
-          >`
-        : nothing}
-      ${item.translated_domain && !item.show_entity_id
-        ? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
-            ${item.translated_domain}
-          </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"]
-    ): EntityPickerItem[] => {
-      let states: EntityPickerItem[] = [];
-
-      if (!hass) {
-        return [];
-      }
-      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 {
-              ...FAKE_ENTITY,
-              entity_id: CREATE_ID + domain,
-              primary: primary,
-              label: primary,
-              secondary: this.hass.localize(
-                "ui.components.entity.entity-picker.new_entity"
-              ),
-              icon_path: mdiPlus,
-            };
-          })
-        : [];
-
-      if (!entityIds.length) {
-        return [
-          {
-            ...FAKE_ENTITY,
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            label: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
     }
 
-      if (includeEntities) {
+    const stateObj = this.hass.states[entityId];
-        entityIds = entityIds.filter((entityId) =>
+
-          includeEntities.includes(entityId)
+    const showClearIcon =
-        );
+      !this.required && !this.disabled && !this.hideClearIcon;
+
+    if (!stateObj) {
+      return html`
+        <ha-svg-icon slot="start" .path=${mdiShape}></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>
+      `;
     }
 
-      if (excludeEntities) {
+    const { area, device } = getEntityContext(stateObj, this.hass);
-        entityIds = entityIds.filter(
-          (entityId) => !excludeEntities.includes(entityId)
-        );
-      }
 
-      if (includeDomains) {
+    const entityName = computeEntityName(stateObj, this.hass);
-        entityIds = entityIds.filter((eid) =>
-          includeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      if (excludeDomains) {
-        entityIds = entityIds.filter(
-          (eid) => !excludeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      const isRTL = computeRTL(this.hass);
-
-      states = entityIds
-        .map<EntityPickerItem>((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 isRTL = computeRTL(this.hass);
+
     const primary = entityName || deviceName || entityId;
     const secondary = [areaName, entityName ? deviceName : undefined]
       .filter(Boolean)
       .join(isRTL ? " ◂ " : " ▸ ");
 
-          const translatedDomain = domainToName(
-            this.hass.localize,
-            computeDomain(entityId)
-          );
-
-          return {
-            ...hass!.states[entityId],
-            primary: primary,
-            secondary:
-              secondary ||
-              this.hass.localize("ui.components.device-picker.no_area"),
-            label: friendlyName,
-            translated_domain: translatedDomain,
-            sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
-            entity_name: entityName || deviceName,
-            area_name: areaName,
-            device_name: deviceName,
-            friendly_name: friendlyName,
-            show_entity_id: hass.userData?.showEntityIdPicker,
-          };
-        })
-        .sort((entityA, entityB) =>
-          caseInsensitiveStringCompare(
-            entityA.sorting_label!,
-            entityB.sorting_label!,
-            this.hass.locale.language
-          )
-        );
-
-      if (includeDeviceClasses) {
-        states = states.filter(
-          (stateObj) =>
-            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
-            (stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class))
-        );
-      }
-
-      if (includeUnitOfMeasurement) {
-        states = states.filter(
-          (stateObj) =>
-            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
-            (stateObj.attributes.unit_of_measurement &&
-              includeUnitOfMeasurement.includes(
-                stateObj.attributes.unit_of_measurement
-              ))
-        );
-      }
-
-      if (entityFilter) {
-        states = states.filter(
-          (stateObj) =>
-            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value || entityFilter!(stateObj)
-        );
-      }
-
-      if (!states.length) {
-        return [
-          {
-            ...FAKE_ENTITY,
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            label: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
-      }
-
-      if (createItems?.length) {
-        states.push(...createItems);
-      }
-
-      return states;
-    }
-  );
-
-  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
+      <state-badge
-        item-value-path="entity_id"
-        .itemLabelPath=${this.itemLabelPath}
         .hass=${this.hass}
-        .value=${this._value}
+        .stateObj=${stateObj}
-        .label=${this.label === undefined
+        slot="start"
-          ? this.hass.localize("ui.components.entity.entity-picker.entity")
+      ></state-badge>
-          : this.label}
+      <span slot="headline">${primary}</span>
-        .helper=${this.helper}
+      <span slot="supporting-text">
-        .allowCustomValue=${this.allowCustomEntity}
+        ${secondary ||
-        .filteredItems=${this._items}
+        this.hass.localize("ui.components.device-picker.no_area")}
-        .renderer=${this._rowRenderer}
+      </span>
-        .required=${this.required}
+      ${showClearIcon
-        .disabled=${this.disabled}
+        ? html`<ha-icon-button
-        .hideClearIcon=${this.hideClearIcon}
+            class="clear"
-        @opened-changed=${this._openedChanged}
+            slot="end"
-        @value-changed=${this._valueChanged}
+            @click=${this._clear}
-        @filter-changed=${this._filterChanged}
+            .path=${mdiClose}
-      >
+          ></ha-icon-button>`
-      </ha-combo-box>
+        : nothing}
+      <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
     `;
   }
 
-  private get _value() {
+  protected render() {
-    return this.value || "";
+    return html`
+      ${this.label ? html`<p class="label">${this.label}</p>` : nothing}
+      <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}
+              .label=${this.hass.localize("ui.common.search")}
+              .value=${this.value}
+              .createDomains=${this.createDomains}
+              .includeDomains=${this.includeDomains}
+              .excludeDomains=${this.excludeDomains}
+              .includeDeviceClasses=${this.includeDeviceClasses}
+              .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
+              .includeEntities=${this.includeEntities}
+              .excludeEntities=${this.excludeEntities}
+              .entityFilter=${this.entityFilter}
+              hide-clear-icon
+              @opened-changed=${this._debounceOpenedChanged}
+              @input=${stopPropagation}
+            ></ha-entity-combo-box>`}
+        ${this._renderHelper()}
+      </div>
+    `;
   }
 
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+  private _renderHelper() {
-    this._opened = ev.detail.value;
+    return this.helper
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      : nothing;
   }
 
-  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+  private _clear(e) {
-    ev.stopPropagation();
+    e.stopPropagation();
-    const newValue = ev.detail.value?.trim();
+    this.value = undefined;
+    fireEvent(this, "value-changed", { value: undefined });
+    fireEvent(this, "change");
+  }
 
-    if (newValue && newValue.startsWith(CREATE_ID)) {
+  private async _showPicker() {
-      const domain = newValue.substring(CREATE_ID.length);
+    if (this.disabled) {
-      showHelperDetailDialog(this, {
-        domain,
-        dialogClosedCallback: (item) => {
-          if (item.entityId) this._setValue(item.entityId);
-        },
-      });
       return;
     }
-
+    this._opened = true;
-    if (newValue !== this._value) {
+    await this.updateComplete;
-      this._setValue(newValue);
+    this._input?.focus();
-    }
+    this._input?.open();
   }
 
-  private _fuseIndex = memoizeOne((states: EntityPickerItem[]) =>
+  // Multiple calls to _openedChanged can be triggered in quick succession
-    Fuse.createIndex(
+  // when the menu is opened
-      [
+  private _debounceOpenedChanged = debounce(
-        "entity_name",
+    (ev) => this._openedChanged(ev),
-        "device_name",
+    10
-        "area_name",
-        "translated_domain",
-        "friendly_name", // for backwards compatibility
-        "entity_id", // for technical search
-      ],
-      states
-    )
   );
 
-  private _filterChanged(ev: CustomEvent): void {
+  private async _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    if (!this._opened) return;
+    const opened = ev.detail.value;
-
+    if (this._opened && !opened) {
-    const target = ev.target as HaComboBox;
+      this._opened = false;
-    const filterString = ev.detail.value.trim().toLowerCase() as string;
+      await this.updateComplete;
-
+      this._anchor?.focus();
-    const index = this._fuseIndex(this._items);
-    const fuse = new HaFuse(this._items, {}, index);
-
-    const results = fuse.multiTermsSearch(filterString);
-    if (results) {
-      target.filteredItems = results.map((result) => result.item);
-    } else {
-      target.filteredItems = this._items;
     }
   }
 
-  private _setValue(value: string | undefined) {
+  static get styles(): CSSResultGroup {
-    this.value = value;
+    return [
-    setTimeout(() => {
+      css`
-      fireEvent(this, "value-changed", { value });
+        mwc-menu-surface {
-      fireEvent(this, "change");
+          --mdc-menu-min-width: 100%;
-    }, 0);
+        }
+        .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 */
+        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);
+        }
+
+        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/ha-combo-box-item.ts

@@ -17,6 +17,9 @@ export class HaComboBoxItem extends HaMdListItem {
       :host([border-top]) md-item {
         border-top: 1px solid var(--divider-color);
       }
+      [slot="start"] {
+        --state-icon-color: var(--secondary-text-color);
+      }
       [slot="headline"] {
         line-height: 22px;
         font-size: 14px;

src/components/ha-combo-box.ts

@@ -147,6 +147,10 @@ export class HaComboBox extends LitElement {
     this._comboBox.value = value;
   }
 
+  public setTextFieldValue(value: string) {
+    this._inputElement.value = value;
+  }
+
   protected render(): TemplateResult {
     return html`
       <!-- @ts-ignore Tag definition is not included in theme folder -->

src/components/ha-md-list-item.ts

@@ -17,6 +17,7 @@ export const haMdListStyles = [
     md-item {
       overflow: var(--md-item-overflow, hidden);
       align-items: var(--md-item-align-items, center);
+      gap: var(--ha-md-list-item-gap, 16px);
     }
   `,
 ];

src/components/ha-target-picker.ts

@@ -39,8 +39,8 @@ 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-picker";
+import "./entity/ha-entity-combo-box";
-import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
+import type { HaEntityComboBoxEntityFilterFunc } from "./entity/ha-entity-combo-box";
 import "./ha-area-floor-picker";
 import { floorDefaultIconPath } from "./ha-floor-icon";
 import "./ha-icon-button";
@@ -80,7 +80,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
+  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
@@ -449,7 +449,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 ></ha-label-picker>
               `
             : html`
-                <ha-entity-picker
+                <ha-entity-combo-box
                   .hass=${this.hass}
                   id="input"
                   .type=${"entity_id"}
@@ -464,7 +464,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   @value-changed=${this._targetPicked}
                   @click=${this._preventDefault}
                   allow-custom-entity
-                ></ha-entity-picker>
+                ></ha-entity-combo-box>
               `}</mwc-menu-surface
     >`;
   }
@@ -839,7 +839,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       mwc-menu-surface {
         --mdc-menu-min-width: 100%;
       }
-      ha-entity-picker,
+      ha-entity-combo-box,
       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,9 +322,8 @@ export const localizeStateMessage = (
   });
 };
 
-export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = (
+export const filterLogbookCompatibleEntities: HaEntityComboBoxEntityFilterFunc =
-  entity
+  (entity) =>
-) =>
     computeStateDomain(entity) !== "sensor" ||
     (entity.attributes.unit_of_measurement === undefined &&
       entity.attributes.state_class === undefined);

src/panels/developer-tools/state/developer-tools-state.ts

@@ -1,5 +1,6 @@
 import {
   mdiClipboardTextMultipleOutline,
+  mdiContentCopy,
   mdiInformationOutline,
   mdiRefresh,
 } from "@mdi/js";
@@ -19,13 +20,13 @@ import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { escapeRegExp } from "../../../common/string/escape_regexp";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { isMobileClient } from "../../../util/is_mobile";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-input-helper-text";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tip";
 import "../../../components/ha-yaml-editor";
@@ -34,7 +35,7 @@ import "../../../components/search-input";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
+import { showToast } from "../../../util/toast";
 
 @customElement("developer-tools-state")
 class HaPanelDevState extends LitElement {
@@ -128,18 +129,20 @@ class HaPanelDevState extends LitElement {
               .value=${this._entityId}
               @value-changed=${this._entityIdChanged}
               allow-custom-entity
-              item-label-path="entity_id"
             ></ha-entity-picker>
-            ${this.hass.enableShortcuts && !isMobileClient
+            ${this._entityId
-              ? html`<ha-tip .hass=${this.hass}
+              ? html`
-                  >${this.hass.localize("ui.tips.key_e_tip", {
+                  <div class="entity-id">
-                    keyboard_shortcut: html`<a
+                    <span>${this._entityId}</span>
-                      href="#"
+                    <ha-icon-button
-                      @click=${this._openShortcutDialog}
+                      .path=${mdiContentCopy}
-                      >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
+                      @click=${this._copyStateEntity}
-                    >`,
+                      title=${this.hass.localize(
-                  })}</ha-tip
+                        "ui.panel.developer-tools.tabs.states.copy_id"
-                >`
+                      )}
+                    ></ha-icon-button>
+                  </div>
+                `
               : nothing}
             <ha-textfield
               .label=${this.hass.localize(
@@ -337,6 +340,14 @@ class HaPanelDevState extends LitElement {
     await copyToClipboard(entity.entity_id);
   }
 
+  private async _copyStateEntity(ev) {
+    ev.preventDefault();
+    await copyToClipboard(this._entityId);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
   private _entitySelected(ev) {
     const entityState: HassEntity = (ev.currentTarget! as any).entity;
     this._entityId = entityState.entity_id;
@@ -574,11 +585,6 @@ class HaPanelDevState extends LitElement {
     this._validJSON = ev.detail.isValid;
   }
 
-  private _openShortcutDialog(ev: Event) {
-    ev.preventDefault();
-    showShortcutsDialog(this);
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -599,6 +605,32 @@ class HaPanelDevState extends LitElement {
           display: block;
         }
 
+        .entity-id {
+          display: block;
+          font-family: var(--ha-font-family-code);
+          color: var(--secondary-text-color);
+          padding: 0 8px;
+          margin-bottom: 8px;
+          margin-top: 4px;
+          font-size: var(--ha-font-size-s);
+          --mdc-icon-size: 14px;
+          --mdc-icon-button-size: 24px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .entity-id ha-icon-button {
+          flex: none;
+        }
+
+        .entity-id span {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
         .state-input {
           margin-top: 16px;
         }
@@ -641,11 +673,6 @@ class HaPanelDevState extends LitElement {
           display: block;
           --mdc-text-field-fill-color: transparent;
         }
-        ha-tip {
-          display: flex;
-          padding: 8px 0;
-          text-align: left;
-        }
 
         th.attributes {
           position: relative;

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

@@ -3,11 +3,9 @@ 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 {
+import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
-  HaEntityPicker,
-  HaEntityPickerEntityFilterFunc,
-} from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-sortable";
 import type { HomeAssistant } from "../../../types";
@@ -20,7 +18,7 @@ export class HuiEntityEditor extends LitElement {
   @property({ attribute: false }) public entities?: EntityConfig[];
 
   @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
+  public entityFilter?: HaEntityComboBoxEntityFilterFunc;
 
   @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-picker") private _entityPicker?: HaEntityPicker;
+  @query("ha-entity-combo-box") private _entityCombobox?: HaEntityComboBox;
 
   @state() private _addMode = false;
 
@@ -144,17 +144,16 @@ export class HuiHeadingBadgesEditor extends LitElement {
         @opened-changed=${this._openedChanged}
         @input=${stopPropagation}
       >
-        <ha-entity-picker
+        <ha-entity-combo-box
           .hass=${this.hass}
           id="input"
-          .type=${"entity_id"}
           .label=${this.hass.localize(
             "ui.components.target-picker.add_entity_id"
           )}
           @value-changed=${this._entityPicked}
           @click=${preventDefault}
           allow-custom-entity
-        ></ha-entity-picker>
+        ></ha-entity-combo-box>
       </mwc-menu-surface>
     `;
   }
@@ -168,8 +167,8 @@ export class HuiHeadingBadgesEditor extends LitElement {
     if (!this._addMode) {
       return;
     }
-    await this._entityPicker?.focus();
+    await this._entityCombobox?.focus();
-    await this._entityPicker?.open();
+    await this._entityCombobox?.open();
     this._opened = true;
   }
 

src/translations/en.json

@@ -566,6 +566,7 @@
           "no_match": "No matching entities found",
           "show_entities": "Show entities",
           "new_entity": "Create a new entity",
+          "placeholder": "Select an entity",
           "create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n } helper."
         },
         "entity-attribute-picker": {