Use list item for statistic picker (#25228)

* Use list item for statistic picker

* Use item interface

* Fix icon

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

@@ -8,7 +8,7 @@ import type { HaEntityComboBoxEntityFilterFunc } from "./ha-entity-combo-box";
 import "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
-class HaEntitiesPickerLight extends LitElement {
+class HaEntitiesPicker extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Array }) public value?: string[];
@@ -17,6 +17,10 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property() public label?: string;
+
+  @property() public placeholder?: string;
+
   @property() public helper?: string;
 
   /**
@@ -67,11 +71,6 @@ class HaEntitiesPickerLight extends LitElement {
   @property({ type: Array, attribute: "exclude-entities" })
   public excludeEntities?: string[];
 
-  @property({ attribute: "picked-entity-label" })
-  public pickedEntityLabel?: string;
-
-  @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
-
   @property({ attribute: false })
   public entityFilter?: HaEntityComboBoxEntityFilterFunc;
 
@@ -84,6 +83,7 @@ class HaEntitiesPickerLight extends LitElement {
 
     const currentEntities = this._currentEntities;
     return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
       ${currentEntities.map(
         (entityId) => html`
           <div>
@@ -99,7 +99,6 @@ class HaEntitiesPickerLight extends LitElement {
               .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
               .entityFilter=${this.entityFilter}
               .value=${entityId}
-              .label=${this.pickedEntityLabel}
               .disabled=${this.disabled}
               .createDomains=${this.createDomains}
               @value-changed=${this._entityChanged}
@@ -121,7 +120,7 @@ class HaEntitiesPickerLight extends LitElement {
           .includeDeviceClasses=${this.includeDeviceClasses}
           .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
           .entityFilter=${this.entityFilter}
-          .label=${this.pickEntityLabel}
+          .placeholder=${this.placeholder}
           .helper=${this.helper}
           .disabled=${this.disabled}
           .createDomains=${this.createDomains}
@@ -198,11 +197,15 @@ class HaEntitiesPickerLight extends LitElement {
     div {
       margin-top: 8px;
     }
+    label {
+      display: block;
+      margin: 0 0 8px;
+    }
   `;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-entities-picker": HaEntitiesPickerLight;
+    "ha-entities-picker": HaEntitiesPicker;
   }
 }

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

@@ -180,7 +180,7 @@ export class HaEntityPicker extends LitElement {
 
   protected render() {
     return html`
-      ${this.label ? html`<p class="label">${this.label}</p>` : nothing}
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
       <div class="container">
         ${!this._opened
           ? html`<ha-combo-box-item
@@ -319,7 +319,7 @@ export class HaEntityPicker extends LitElement {
           --mdc-icon-size: 20px;
           width: 32px;
         }
-        .label {
+        label {
           display: block;
           margin: 0 0 8px;
         }

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

@@ -0,0 +1,482 @@
+import { mdiChartLine, mdiShape } 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 { ensureArray } from "../../common/array/ensure-array";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+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 type { StatisticsMetaData } from "../../data/recorder";
+import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
+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-svg-icon";
+import "./state-badge";
+
+type StatisticItemType = "entity" | "external" | "no_state";
+
+interface StatisticItem {
+  id: string;
+  label: "";
+  primary: string;
+  secondary?: string;
+  show_entity_id?: boolean;
+  entity_name?: string;
+  area_name?: string;
+  device_name?: string;
+  friendly_name?: string;
+  sorting_label?: string;
+  state?: HassEntity;
+  type?: StatisticItemType;
+  iconPath?: string;
+}
+
+const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
+
+const ENTITY_ID_STYLE = styleMap({
+  fontFamily: "var(--code-font-family, monospace)",
+  fontSize: "11px",
+});
+
+@customElement("ha-statistic-combo-box")
+export class HaStatisticComboBox extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property({ attribute: "statistic-types" })
+  public statisticTypes?: "mean" | "sum";
+
+  @property({ type: Boolean, attribute: "allow-custom-entity" })
+  public allowCustomEntity;
+
+  @property({ attribute: false, type: Array })
+  public statisticIds?: StatisticsMetaData[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  /**
+   * Show only statistics natively stored with these units of measurements.
+   * @type {Array}
+   * @attr include-statistics-unit-of-measurement
+   */
+  @property({
+    type: Array,
+    attribute: "include-statistics-unit-of-measurement",
+  })
+  public includeStatisticsUnitOfMeasurement?: string | string[];
+
+  /**
+   * Show only statistics with these unit classes.
+   * @attr include-unit-class
+   */
+  @property({ attribute: "include-unit-class" })
+  public includeUnitClass?: string | string[];
+
+  /**
+   * Show only statistics with these device classes.
+   * @attr include-device-class
+   */
+  @property({ attribute: "include-device-class" })
+  public includeDeviceClass?: string | string[];
+
+  /**
+   * Show only statistics on entities.
+   * @type {Boolean}
+   * @attr entities-only
+   */
+  @property({ type: Boolean, attribute: "entities-only" })
+  public entitiesOnly = false;
+
+  /**
+   * List of statistics to be excluded.
+   * @type {Array}
+   * @attr exclude-statistics
+   */
+  @property({ type: Array, attribute: "exclude-statistics" })
+  public excludeStatistics?: string[];
+
+  @property({ attribute: false }) public helpMissingEntityUrl =
+    "/more-info/statistics/";
+
+  @state() private _opened = false;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  private _initialItems = false;
+
+  private _items: StatisticItem[] = [];
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    this.hass.loadBackendTranslation("title");
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
+    item,
+    { index }
+  ) => html`
+    <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
+      ${!item.state
+        ? html`
+            <ha-svg-icon
+              style="margin: 0 4px"
+              slot="start"
+              .path=${item.iconPath}
+            ></ha-svg-icon>
+          `
+        : html`
+            <state-badge
+              slot="start"
+              .stateObj=${item.state}
+              .hass=${this.hass}
+            ></state-badge>
+          `}
+
+      <span slot="headline">${item.primary} </span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+      ${item.id && item.show_entity_id
+        ? html`
+            <span slot="supporting-text" style=${ENTITY_ID_STYLE}>
+              ${item.id}
+            </span>
+          `
+        : nothing}
+    </ha-combo-box-item>
+  `;
+
+  private _getItems = memoizeOne(
+    (
+      _opened: boolean,
+      hass: this["hass"],
+      statisticIds: StatisticsMetaData[],
+      includeStatisticsUnitOfMeasurement?: string | string[],
+      includeUnitClass?: string | string[],
+      includeDeviceClass?: string | string[],
+      entitiesOnly?: boolean,
+      excludeStatistics?: string[],
+      value?: string
+    ): StatisticItem[] => {
+      if (!statisticIds.length) {
+        return [
+          {
+            id: "",
+            label: "",
+            primary: this.hass.localize(
+              "ui.components.statistic-picker.no_statistics"
+            ),
+          },
+        ];
+      }
+
+      if (includeStatisticsUnitOfMeasurement) {
+        const includeUnits: (string | null)[] = ensureArray(
+          includeStatisticsUnitOfMeasurement
+        );
+        statisticIds = statisticIds.filter((meta) =>
+          includeUnits.includes(meta.statistics_unit_of_measurement)
+        );
+      }
+      if (includeUnitClass) {
+        const includeUnitClasses: (string | null)[] =
+          ensureArray(includeUnitClass);
+        statisticIds = statisticIds.filter((meta) =>
+          includeUnitClasses.includes(meta.unit_class)
+        );
+      }
+      if (includeDeviceClass) {
+        const includeDeviceClasses: (string | null)[] =
+          ensureArray(includeDeviceClass);
+        statisticIds = statisticIds.filter((meta) => {
+          const stateObj = this.hass.states[meta.statistic_id];
+          if (!stateObj) {
+            return true;
+          }
+          return includeDeviceClasses.includes(
+            stateObj.attributes.device_class || ""
+          );
+        });
+      }
+
+      const isRTL = computeRTL(this.hass);
+
+      const output: StatisticItem[] = [];
+      statisticIds.forEach((meta) => {
+        if (
+          excludeStatistics &&
+          meta.statistic_id !== value &&
+          excludeStatistics.includes(meta.statistic_id)
+        ) {
+          return;
+        }
+        const stateObj = this.hass.states[meta.statistic_id];
+
+        if (!stateObj) {
+          if (!entitiesOnly) {
+            const id = meta.statistic_id;
+            const label = getStatisticLabel(this.hass, meta.statistic_id, meta);
+            const type =
+              meta.statistic_id.includes(":") &&
+              !meta.statistic_id.includes(".")
+                ? "external"
+                : "no_state";
+
+            if (type === "no_state") {
+              output.push({
+                id,
+                primary: label,
+                secondary: this.hass.localize(
+                  "ui.components.statistic-picker.no_state"
+                ),
+                label: "",
+                type,
+                sorting_label: label,
+                iconPath: mdiShape,
+              });
+            } else if (type === "external") {
+              const domain = id.split(":")[0];
+              const domainName = domainToName(this.hass.localize, domain);
+              output.push({
+                id,
+                primary: label,
+                secondary: domainName,
+                label: "",
+                type,
+                sorting_label: label,
+                iconPath: mdiChartLine,
+              });
+            }
+          }
+          return;
+        }
+        const id = meta.statistic_id;
+
+        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 || id;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+
+        output.push({
+          id,
+          primary,
+          secondary,
+          label: "",
+          state: stateObj,
+          type: "entity",
+          sorting_label: [deviceName, entityName].join("_"),
+          entity_name: entityName || deviceName,
+          area_name: areaName,
+          device_name: deviceName,
+          friendly_name: friendlyName,
+          show_entity_id: hass.userData?.showEntityIdPicker,
+        });
+      });
+
+      if (!output.length) {
+        return [
+          {
+            id: "",
+            primary: this.hass.localize(
+              "ui.components.statistic-picker.no_match"
+            ),
+            label: "",
+          },
+        ];
+      }
+
+      if (output.length > 1) {
+        output.sort((a, b) => {
+          const aPrefix = TYPE_ORDER.indexOf(a.type || "no_state");
+          const bPrefix = TYPE_ORDER.indexOf(b.type || "no_state");
+
+          return caseInsensitiveStringCompare(
+            `${aPrefix}_${a.sorting_label || ""}`,
+            `${bPrefix}_${b.sorting_label || ""}`,
+            this.hass.locale.language
+          );
+        });
+      }
+
+      output.push({
+        id: "__missing",
+        primary: this.hass.localize(
+          "ui.components.statistic-picker.missing_entity"
+        ),
+        label: "",
+      });
+
+      return output;
+    }
+  );
+
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
+  }
+
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
+  }
+
+  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.hasUpdated && !this.statisticIds) ||
+      changedProps.has("statisticTypes")
+    ) {
+      this._getStatisticIds();
+    }
+
+    if (
+      this.statisticIds &&
+      (!this._initialItems || (changedProps.has("_opened") && this._opened))
+    ) {
+      this._items = this._getItems(
+        this._opened,
+        this.hass,
+        this.statisticIds!,
+        this.includeStatisticsUnitOfMeasurement,
+        this.includeUnitClass,
+        this.includeDeviceClass,
+        this.entitiesOnly,
+        this.excludeStatistics,
+        this.value
+      );
+      if (this._initialItems) {
+        this.comboBox.filteredItems = this._items;
+      }
+      this._initialItems = true;
+    }
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (this._items.length === 0) {
+      return nothing;
+    }
+
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.statistic-picker.statistic")
+          : this.label}
+        .value=${this._value}
+        .renderer=${this._rowRenderer}
+        .disabled=${this.disabled}
+        .allowCustomValue=${this.allowCustomEntity}
+        .filteredItems=${this._items}
+        item-value-path="id"
+        item-id-path="id"
+        item-label-path="label"
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._statisticChanged}
+        @filter-changed=${this._filterChanged}
+      ></ha-combo-box>
+    `;
+  }
+
+  private async _getStatisticIds() {
+    this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _statisticChanged(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    let newValue = ev.detail.value;
+    if (newValue === "__missing") {
+      newValue = "";
+    }
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
+    Fuse.createIndex(
+      [
+        "entity_name",
+        "device_name",
+        "area_name",
+        "friendly_name", // for backwards compatibility
+        "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) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-statistic-combo-box": HaStatisticComboBox;
+  }
+}

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

@@ -1,65 +1,66 @@
-import { mdiChartLine } from "@mdi/js";
+import { mdiChartLine, 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 type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
+import {
-import { html, LitElement, nothing } from "lit";
+  css,
+  html,
+  LitElement,
+  nothing,
+  type CSSResultGroup,
+  type PropertyValues,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { ensureArray } from "../../common/array/ensure-array";
 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 { 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 { debounce } from "../../common/util/debounce";
 import { domainToName } from "../../data/integration";
-import type { StatisticsMetaData } from "../../data/recorder";
+import {
-import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
+  getStatisticIds,
-import { HaFuse } from "../../resources/fuse";
+  getStatisticLabel,
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+  type StatisticsMetaData,
-import "../ha-combo-box";
+} from "../../data/recorder";
-import type { HaComboBox } from "../ha-combo-box";
+import type { HomeAssistant } from "../../types";
 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 } from "./ha-entity-combo-box";
+import "./ha-statistic-combo-box";
 import "./state-badge";
 
-type StatisticItemType = "entity" | "external" | "no_state";
-
 interface StatisticItem {
-  id: string;
-  label: string;
   primary: string;
   secondary?: string;
-  show_entity_id?: boolean;
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
-  sorting_label?: string;
-  state?: HassEntity;
-  type?: StatisticItemType;
   iconPath?: string;
+  stateObj?: HassEntity;
 }
 
-const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
-
-const ENTITY_ID_STYLE = styleMap({
-  fontFamily: "var(--code-font-family, monospace)",
-  fontSize: "11px",
-});
-
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker 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() public label?: string;
 
   @property() public value?: string;
 
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
   @property({ attribute: "statistic-types" })
   public statisticTypes?: "mean" | "sum";
 
@@ -69,8 +70,6 @@ export class HaStatisticPicker extends LitElement {
   @property({ attribute: false, type: Array })
   public statisticIds?: StatisticsMetaData[];
 
-  @property({ type: Boolean }) public disabled = false;
-
   /**
    * Show only statistics natively stored with these units of measurements.
    * @type {Array}
@@ -112,251 +111,15 @@ export class HaStatisticPicker extends LitElement {
   @property({ type: Array, attribute: "exclude-statistics" })
   public excludeStatistics?: string[];
 
-  @property({ attribute: false }) public helpMissingEntityUrl =
+  @property({ attribute: "hide-clear-icon", type: Boolean })
-    "/more-info/statistics/";
+  public hideClearIcon = false;
+
+  @query("#anchor") private _anchor?: HaMdListItem;
+
+  @query("#input") private _input?: HaEntityComboBox;
 
   @state() private _opened = false;
 
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  private _initialItems = false;
-
-  private _items: StatisticItem[] = [];
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    this.hass.loadBackendTranslation("title");
-  }
-
-  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
-    item,
-    { index }
-  ) => html`
-    <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
-      ${!item.state
-        ? html`<ha-svg-icon
-            style="margin: 0 4px"
-            slot="start"
-            .path=${item.iconPath}
-          ></ha-svg-icon>`
-        : html`
-            <state-badge
-              slot="start"
-              .stateObj=${item.state}
-              .hass=${this.hass}
-            ></state-badge>
-          `}
-
-      <span slot="headline">${item.primary} </span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
-      ${item.id && item.show_entity_id
-        ? html`
-            <span slot="supporting-text" style=${ENTITY_ID_STYLE}>
-              ${item.id}
-            </span>
-          `
-        : nothing}
-    </ha-combo-box-item>
-  `;
-
-  private _getItems = memoizeOne(
-    (
-      _opened: boolean,
-      hass: this["hass"],
-      statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string | string[],
-      includeUnitClass?: string | string[],
-      includeDeviceClass?: string | string[],
-      entitiesOnly?: boolean,
-      excludeStatistics?: string[],
-      value?: string
-    ): StatisticItem[] => {
-      if (!statisticIds.length) {
-        return [
-          {
-            id: "",
-            label: this.hass.localize(
-              "ui.components.statistic-picker.no_statistics"
-            ),
-            primary: this.hass.localize(
-              "ui.components.statistic-picker.no_statistics"
-            ),
-          },
-        ];
-      }
-
-      if (includeStatisticsUnitOfMeasurement) {
-        const includeUnits: (string | null)[] = ensureArray(
-          includeStatisticsUnitOfMeasurement
-        );
-        statisticIds = statisticIds.filter((meta) =>
-          includeUnits.includes(meta.statistics_unit_of_measurement)
-        );
-      }
-      if (includeUnitClass) {
-        const includeUnitClasses: (string | null)[] =
-          ensureArray(includeUnitClass);
-        statisticIds = statisticIds.filter((meta) =>
-          includeUnitClasses.includes(meta.unit_class)
-        );
-      }
-      if (includeDeviceClass) {
-        const includeDeviceClasses: (string | null)[] =
-          ensureArray(includeDeviceClass);
-        statisticIds = statisticIds.filter((meta) => {
-          const stateObj = this.hass.states[meta.statistic_id];
-          if (!stateObj) {
-            return true;
-          }
-          return includeDeviceClasses.includes(
-            stateObj.attributes.device_class || ""
-          );
-        });
-      }
-
-      const isRTL = computeRTL(this.hass);
-
-      const output: StatisticItem[] = [];
-      statisticIds.forEach((meta) => {
-        if (
-          excludeStatistics &&
-          meta.statistic_id !== value &&
-          excludeStatistics.includes(meta.statistic_id)
-        ) {
-          return;
-        }
-        const entityState = this.hass.states[meta.statistic_id];
-        if (!entityState) {
-          if (!entitiesOnly) {
-            const id = meta.statistic_id;
-            const label = getStatisticLabel(this.hass, meta.statistic_id, meta);
-            const type =
-              meta.statistic_id.includes(":") &&
-              !meta.statistic_id.includes(".")
-                ? "external"
-                : "no_state";
-
-            if (type === "no_state") {
-              output.push({
-                id,
-                primary: label,
-                secondary: this.hass.localize(
-                  "ui.components.statistic-picker.no_state"
-                ),
-                label,
-                type,
-                sorting_label: label,
-              });
-            } else if (type === "external") {
-              const domain = id.split(":")[0];
-              const domainName = domainToName(this.hass.localize, domain);
-              output.push({
-                id,
-                primary: label,
-                secondary: domainName,
-                label,
-                type,
-                sorting_label: label,
-                iconPath: mdiChartLine,
-              });
-            }
-          }
-          return;
-        }
-        const id = meta.statistic_id;
-
-        const { area, device } = getEntityContext(entityState, hass);
-
-        const friendlyName = computeStateName(entityState); // Keep this for search
-        const entityName = computeEntityName(entityState, hass);
-        const deviceName = device ? computeDeviceName(device) : undefined;
-        const areaName = area ? computeAreaName(area) : undefined;
-
-        const primary = entityName || deviceName || id;
-        const secondary = [areaName, entityName ? deviceName : undefined]
-          .filter(Boolean)
-          .join(isRTL ? " ◂ " : " ▸ ");
-
-        output.push({
-          id,
-          primary,
-          secondary,
-          label: friendlyName,
-          state: entityState,
-          type: "entity",
-          sorting_label: [deviceName, entityName].join("_"),
-          entity_name: entityName || deviceName,
-          area_name: areaName,
-          device_name: deviceName,
-          friendly_name: friendlyName,
-          show_entity_id: hass.userData?.showEntityIdPicker,
-        });
-      });
-
-      if (!output.length) {
-        return [
-          {
-            id: "",
-            primary: this.hass.localize(
-              "ui.components.statistic-picker.no_match"
-            ),
-            label: this.hass.localize(
-              "ui.components.statistic-picker.no_match"
-            ),
-          },
-        ];
-      }
-
-      if (output.length > 1) {
-        output.sort((a, b) => {
-          const aPrefix = TYPE_ORDER.indexOf(a.type || "no_state");
-          const bPrefix = TYPE_ORDER.indexOf(b.type || "no_state");
-
-          return caseInsensitiveStringCompare(
-            `${aPrefix}_${a.sorting_label || ""}`,
-            `${bPrefix}_${b.sorting_label || ""}`,
-            this.hass.locale.language
-          );
-        });
-      }
-
-      output.push({
-        id: "__missing",
-        primary: this.hass.localize(
-          "ui.components.statistic-picker.missing_entity"
-        ),
-        label: this.hass.localize(
-          "ui.components.statistic-picker.missing_entity"
-        ),
-      });
-
-      return output;
-    }
-  );
-
-  public async open() {
-    await this.updateComplete;
-    await this.comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
-
-  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.hasUpdated && !this.statisticIds) ||
@@ -364,117 +127,278 @@ export class HaStatisticPicker extends LitElement {
     ) {
       this._getStatisticIds();
     }
-
-    if (
-      this.statisticIds &&
-      (!this._initialItems || (changedProps.has("_opened") && this._opened))
-    ) {
-      this._items = this._getItems(
-        this._opened,
-        this.hass,
-        this.statisticIds!,
-        this.includeStatisticsUnitOfMeasurement,
-        this.includeUnitClass,
-        this.includeDeviceClass,
-        this.entitiesOnly,
-        this.excludeStatistics,
-        this.value
-      );
-      if (this._initialItems) {
-        this.comboBox.filteredItems = this._items;
-      }
-      this._initialItems = true;
-    }
-  }
-
-  protected render(): TemplateResult | typeof nothing {
-    if (this._items.length === 0) {
-      return nothing;
-    }
-
-    return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.statistic-picker.statistic")
-          : this.label}
-        .value=${this._value}
-        .renderer=${this._rowRenderer}
-        .disabled=${this.disabled}
-        .allowCustomValue=${this.allowCustomEntity}
-        .filteredItems=${this._items}
-        item-value-path="id"
-        item-id-path="id"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._statisticChanged}
-        @filter-changed=${this._filterChanged}
-      ></ha-combo-box>
-    `;
   }
 
   private async _getStatisticIds() {
     this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
   }
 
-  private get _value() {
+  private _statisticMetaData = memoizeOne(
-    return this.value || "";
+    (statisticId: string, statisticIds: StatisticsMetaData[]) => {
+      if (!statisticIds) {
+        return undefined;
       }
-
+      return statisticIds.find(
-  private _statisticChanged(ev: ValueChangedEvent<string>) {
+        (statistic) => statistic.statistic_id === statisticId
-    ev.stopPropagation();
+      );
-    let newValue = ev.detail.value;
-    if (newValue === "__missing") {
-      newValue = "";
     }
-
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
-    Fuse.createIndex(
-      [
-        "label",
-        "entity_name",
-        "device_name",
-        "area_name",
-        "friendly_name", // for backwards compatibility
-        "id", // for technical search
-      ],
-      states
-    )
   );
 
-  private _filterChanged(ev: CustomEvent): void {
+  private _renderContent() {
-    if (!this._opened) return;
+    const statisticId = this.value || "";
 
-    const target = ev.target as HaComboBox;
+    if (!this.value) {
-    const filterString = ev.detail.value.trim().toLowerCase() as string;
+      return html`
+        <span slot="headline" class="placeholder"
+          >${this.placeholder ??
+          this.hass.localize(
+            "ui.components.statistic-picker.placeholder"
+          )}</span
+        >
+        <ha-svg-icon class="edit" slot="end" .path=${mdiMenuDown}></ha-svg-icon>
+      `;
+    }
 
-    const index = this._fuseIndex(this._items);
+    const item = this._computeItem(statisticId);
-    const fuse = new HaFuse(this._items, {}, index);
 
-    const results = fuse.multiTermsSearch(filterString);
+    const showClearIcon =
+      !this.required && !this.disabled && !this.hideClearIcon;
 
-    if (results) {
+    return html`
-      target.filteredItems = results.map((result) => result.item);
+      ${item.stateObj
-    } else {
+        ? html`
-      target.filteredItems = this._items;
+            <state-badge
+              .hass=${this.hass}
+              .stateObj=${item.stateObj}
+              slot="start"
+            ></state-badge>
+          `
+        : item.iconPath
+          ? html`<ha-svg-icon
+              slot="start"
+              .path=${item.iconPath}
+            ></ha-svg-icon>`
+          : nothing}
+      <span slot="headline">${item.primary}</span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+      ${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 _computeItem(statisticId: string): StatisticItem {
+    const stateObj = this.hass.states[statisticId];
+
+    if (stateObj) {
+      const { area, device } = getEntityContext(stateObj, this.hass);
+
+      const entityName = computeEntityName(stateObj, this.hass);
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+
+      const isRTL = computeRTL(this.hass);
+
+      const primary = entityName || deviceName || statisticId;
+      const secondary = [areaName, entityName ? deviceName : undefined]
+        .filter(Boolean)
+        .join(isRTL ? " ◂ " : " ▸ ");
+
+      return {
+        primary,
+        secondary,
+        stateObj,
+      };
+    }
+
+    const statistic = this.statisticIds
+      ? this._statisticMetaData(statisticId, this.statisticIds)
+      : undefined;
+
+    if (statistic) {
+      const type =
+        statisticId.includes(":") && !statisticId.includes(".")
+          ? "external"
+          : "no_state";
+
+      if (type === "external") {
+        const label = getStatisticLabel(this.hass, statisticId, statistic);
+        const domain = statisticId.split(":")[0];
+        const domainName = domainToName(this.hass.localize, domain);
+
+        return {
+          primary: label,
+          secondary: domainName,
+          iconPath: mdiChartLine,
+        };
       }
     }
 
-  private _setValue(value: string) {
+    return {
-    this.value = value;
+      primary: statisticId,
-    setTimeout(() => {
+      iconPath: mdiShape,
-      fireEvent(this, "value-changed", { value });
+    };
+  }
+
+  protected render() {
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : 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-statistic-combo-box
+                id="input"
+                .hass=${this.hass}
+                .autofocus=${this.autofocus}
+                .allowCustomEntity=${this.allowCustomEntity}
+                .label=${this.hass.localize("ui.common.search")}
+                .value=${this.value}
+                .includeStatisticsUnitOfMeasurement=${this
+                  .includeStatisticsUnitOfMeasurement}
+                .includeUnitClass=${this.includeUnitClass}
+                .includeDeviceClass=${this.includeDeviceClass}
+                .statisticTypes=${this.statisticTypes}
+                .statisticIds=${this.statisticIds}
+                .excludeStatistics=${this.excludeStatistics}
+                hide-clear-icon
+                @opened-changed=${this._debounceOpenedChanged}
+                @input=${stopPropagation}
+              ></ha-statistic-combo-box>
+            `}
+        ${this._renderHelper()}
+      </div>
+    `;
+  }
+
+  private _renderHelper() {
+    return this.helper
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      : nothing;
+  }
+
+  private _clear(e) {
+    e.stopPropagation();
+    this.value = undefined;
+    fireEvent(this, "value-changed", { value: undefined });
     fireEvent(this, "change");
-    }, 0);
+  }
+
+  private async _showPicker() {
+    if (this.disabled) {
+      return;
+    }
+    this._opened = true;
+    await this.updateComplete;
+    this._input?.focus();
+    this._input?.open();
+  }
+
+  // Multiple calls to _openedChanged can be triggered in quick succession
+  // when the menu is opened
+  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 {
+    return [
+      css`
+        .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/entity/ha-statistics-picker.ts

@@ -16,11 +16,11 @@ class HaStatisticsPicker extends LitElement {
   @property({ attribute: "statistic-types" })
   public statisticTypes?: "mean" | "sum";
 
-  @property({ attribute: "picked-statistic-label" })
+  @property({ type: String })
-  public pickedStatisticLabel?: string;
+  public label?: string;
 
-  @property({ attribute: "pick-statistic-label" })
+  @property({ type: String })
-  public pickStatisticLabel?: string;
+  public placeholder?: string;
 
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
@@ -82,6 +82,7 @@ class HaStatisticsPicker extends LitElement {
       : this.statisticTypes;
 
     return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
       ${repeat(
         this._currentStatistics,
         (statisticId) => statisticId,
@@ -96,7 +97,6 @@ class HaStatisticsPicker extends LitElement {
               .value=${statisticId}
               .statisticTypes=${includeStatisticTypesCurrent}
               .statisticIds=${this.statisticIds}
-              .label=${this.pickedStatisticLabel}
               .excludeStatistics=${this.value}
               .allowCustomEntity=${this.allowCustomEntity}
               @value-changed=${this._statisticChanged}
@@ -113,7 +113,7 @@ class HaStatisticsPicker extends LitElement {
           .includeDeviceClass=${this.includeDeviceClass}
           .statisticTypes=${this.statisticTypes}
           .statisticIds=${this.statisticIds}
-          .label=${this.pickStatisticLabel}
+          .placeholder=${this.placeholder}
           .excludeStatistics=${this.value}
           .allowCustomEntity=${this.allowCustomEntity}
           @value-changed=${this._addStatistic}
@@ -181,6 +181,10 @@ class HaStatisticsPicker extends LitElement {
       width: 100%;
       margin-top: 8px;
     }
+    label {
+      display: block;
+      margin-bottom: 0 0 8px;
+    }
   `;
 }
 

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

@@ -76,10 +76,10 @@ export class HaEntitySelector extends LitElement {
     }
 
     return html`
-      ${this.label ? html`<label>${this.label}</label>` : ""}
       <ha-entities-picker
         .hass=${this.hass}
         .value=${this.value}
+        .label=${this.label}
         .helper=${this.helper}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}

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

@@ -318,10 +318,10 @@ export class HuiStatisticsGraphCardEditor
         <ha-statistics-picker
           allow-custom-entity
           .hass=${this.hass}
-          .pickStatisticLabel=${this.hass!.localize(
+          .placeholder=${this.hass!.localize(
             "ui.panel.lovelace.editor.card.statistics-graph.pick_statistic"
           )}
-          .pickedStatisticLabel=${this.hass!.localize(
+          .label=${this.hass!.localize(
             "ui.panel.lovelace.editor.card.statistics-graph.picked_statistic"
           )}
           .includeStatisticsUnitOfMeasurement=${statisticsUnit}

src/translations/en.json

@@ -723,6 +723,7 @@
       },
       "statistic-picker": {
         "statistic": "Statistic",
+        "placeholder": "Select a statistic",
         "no_statistics": "You don't have any statistics",
         "no_match": "No matching statistics found",
         "no_state": "Entity without state",