Fix clearing of filters (#20288)

* Fix clearing of filters

* Update ha-filter-integrations.ts

* Update ha-filter-integrations.ts

src/components/ha-filter-blueprints.ts

@@ -50,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
                     ? nothing
                     : html`<ha-check-list-item
                         .value=${id}
-                        .selected=${this.value?.includes(id)}
+                        .selected=${(this.value || []).includes(id)}
                       >
                         ${blueprint.metadata.name || id}
                       </ha-check-list-item>`

src/components/ha-filter-devices.ts

@@ -57,7 +57,8 @@ export class HaFilterDevices extends LitElement {
         ${this._shouldRender
           ? html`<mwc-list class="ha-scrollbar">
               <lit-virtualizer
-                .items=${this._devices(this.hass.devices)}
+                .items=${this._devices(this.hass.devices, this.value)}
+                .keyFunction=${this._keyFunction}
                 .renderItem=${this._renderItem}
                 @click=${this._handleItemClick}
               >
@@ -68,6 +69,8 @@ export class HaFilterDevices extends LitElement {
     `;
   }
 
+  private _keyFunction = (device) => device?.id;
+
   private _renderItem = (device) =>
     html`<ha-check-list-item
       .value=${device.id}
@@ -109,7 +112,7 @@ export class HaFilterDevices extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _devices = memoizeOne((devices: HomeAssistant["devices"]) => {
+  private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
     const values = Object.values(devices);
     return values.sort((a, b) =>
       stringCompare(

src/components/ha-filter-entities.ts

@@ -59,7 +59,12 @@ export class HaFilterEntities extends LitElement {
           ? html`
               <mwc-list class="ha-scrollbar">
                 <lit-virtualizer
-                  .items=${this._entities(this.hass.states, this.type)}
+                  .items=${this._entities(
+                    this.hass.states,
+                    this.type,
+                    this.value
+                  )}
+                  .keyFunction=${this._keyFunction}
                   .renderItem=${this._renderItem}
                   @click=${this._handleItemClick}
                 >
@@ -81,6 +86,8 @@ export class HaFilterEntities extends LitElement {
     }
   }
 
+  private _keyFunction = (entity) => entity?.entity_id;
+
   private _renderItem = (entity) =>
     html`<ha-check-list-item
       .value=${entity.entity_id}
@@ -119,7 +126,7 @@ export class HaFilterEntities extends LitElement {
   }
 
   private _entities = memoizeOne(
-    (states: HomeAssistant["states"], type: this["type"]) => {
+    (states: HomeAssistant["states"], type: this["type"], _value) => {
       const values = Object.values(states);
       return values
         .filter(

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`<ha-check-list-item
                       .value=${integration.domain}
-                      .selected=${this.value?.includes(integration.domain)}
+                      .selected=${(this.value || []).includes(
+                        integration.domain
+                      )}
                       graphic="icon"
                     >
                       <ha-domain-icon
@@ -92,26 +97,27 @@ export class HaFilterIntegrations extends LitElement {
     this._manifests = await fetchIntegrationManifests(this.hass);
   }
 
-  private _integrations = memoizeOne((manifest: IntegrationManifest[]) =>
-    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<SelectedDetail<Set<number>>>
   ) {
-    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", {

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`<ha-check-list-item
-                    .value=${label.label_id}
-                    .selected=${this.value?.includes(label.label_id)}
-                    hasMeta
-                  >
-                    <ha-label style=${color ? `--color: ${color}` : ""}>
-                      ${label.icon
-                        ? html`<ha-icon
-                            slot="icon"
-                            .icon=${label.icon}
-                          ></ha-icon>`
-                        : nothing}
-                      ${label.name}
-                    </ha-label>
-                  </ha-check-list-item>`;
-                })}
+                ${repeat(
+                  this._labels,
+                  (label) => label.label_id,
+                  (label) => {
+                    const color = label.color
+                      ? computeCssColor(label.color)
+                      : undefined;
+                    return html`<ha-check-list-item
+                      .value=${label.label_id}
+                      .selected=${(this.value || []).includes(label.label_id)}
+                      hasMeta
+                    >
+                      <ha-label style=${color ? `--color: ${color}` : ""}>
+                        ${label.icon
+                          ? html`<ha-icon
+                              slot="icon"
+                              .icon=${label.icon}
+                            ></ha-icon>`
+                          : nothing}
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`;
+                  }
+                )}
               </mwc-list>
             `
           : nothing}