diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index f7ef069c5e..c20dc197bf 100644
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -50,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
? nothing
: html`
${blueprint.metadata.name || id}
`
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index 944b26c87c..4b9f2bebc4 100644
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -57,7 +57,8 @@ export class HaFilterDevices extends LitElement {
${this._shouldRender
? html`
@@ -68,6 +69,8 @@ export class HaFilterDevices extends LitElement {
`;
}
+ private _keyFunction = (device) => device?.id;
+
private _renderItem = (device) =>
html` {
+ private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
const values = Object.values(devices);
return values.sort((a, b) =>
stringCompare(
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 5d43de5f1c..2cffd99456 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -59,7 +59,12 @@ export class HaFilterEntities extends LitElement {
? html`
@@ -81,6 +86,8 @@ export class HaFilterEntities extends LitElement {
}
}
+ private _keyFunction = (entity) => entity?.entity_id;
+
private _renderItem = (entity) =>
html` {
+ (states: HomeAssistant["states"], type: this["type"], _value) => {
const values = Object.values(states);
return values
.filter(
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 6fd909168c..5f8b1224b5 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -1,15 +1,16 @@
import { SelectedDetail } from "@material/mwc-list";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare";
-import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
import {
fetchIntegrationManifests,
IntegrationManifest,
} from "../data/integration";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
import "./ha-domain-icon";
@customElement("ha-filter-integrations")
@@ -47,11 +48,15 @@ export class HaFilterIntegrations extends LitElement {
multi
class="ha-scrollbar"
>
- ${this._integrations(this._manifests).map(
+ ${repeat(
+ this._integrations(this._manifests, this.value),
+ (i) => i.domain,
(integration) =>
html`
- manifest
- .filter(
- (mnfst) =>
- !mnfst.integration_type ||
- !["entity", "system", "hardware"].includes(mnfst.integration_type)
- )
- .sort((a, b) =>
- stringCompare(
- a.name || a.domain,
- b.name || b.domain,
- this.hass.locale.language
+ private _integrations = memoizeOne(
+ (manifest: IntegrationManifest[], _value) =>
+ manifest
+ .filter(
+ (mnfst) =>
+ !mnfst.integration_type ||
+ !["entity", "system", "hardware"].includes(mnfst.integration_type)
+ )
+ .sort((a, b) =>
+ stringCompare(
+ a.name || a.domain,
+ b.name || b.domain,
+ this.hass.locale.language
+ )
)
- )
);
private async _integrationsSelected(
ev: CustomEvent>>
) {
- const integrations = this._integrations(this._manifests!);
+ const integrations = this._integrations(this._manifests!, this.value);
if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", {
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index dd7ceada0b..43c3c10098 100644
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -1,9 +1,10 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
+import { mdiPlus } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
-import { mdiPlus } from "@mdi/js";
+import { repeat } from "lit/directives/repeat";
import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event";
import {
@@ -12,13 +13,13 @@ import {
subscribeLabelRegistry,
} from "../data/label_registry";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-expansion-panel";
import "./ha-icon";
import "./ha-label";
-import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
@customElement("ha-filter-labels")
export class HaFilterLabels extends SubscribeMixin(LitElement) {
@@ -63,26 +64,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
class="ha-scrollbar"
multi
>
- ${this._labels.map((label) => {
- const color = label.color
- ? computeCssColor(label.color)
- : undefined;
- return html`
-
- ${label.icon
- ? html``
- : nothing}
- ${label.name}
-
- `;
- })}
+ ${repeat(
+ this._labels,
+ (label) => label.label_id,
+ (label) => {
+ const color = label.color
+ ? computeCssColor(label.color)
+ : undefined;
+ return html`
+
+ ${label.icon
+ ? html``
+ : nothing}
+ ${label.name}
+
+ `;
+ }
+ )}
`
: nothing}