Apply changes from filter chip dropdowns immediately

frontend/src/features/archived-items/archived-item-state-filter.ts

@@ -53,13 +53,7 @@ export class ArchivedItemStateFilter extends BtrixElement {
   private readonly fuse = new Fuse<CrawlState>(finishedCrawlStates);
 
   @state()
-  private get selectedStates() {
-    return Array.from(this.selected.entries())
-      .filter(([_tag, selected]) => selected)
-      .map(([tag]) => tag);
-  }
-
-  private selected = new Map<CrawlState, boolean>();
+  selected = new Map<CrawlState, boolean>();
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("states")) {
@@ -71,6 +65,22 @@ export class ArchivedItemStateFilter extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected")) {
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
+        >("btrix-change", {
+          detail: {
+            value: Array.from(this.selected.entries())
+              .filter(([_tag, selected]) => selected)
+              .map(([tag]) => tag),
+          },
+        }),
+      );
+    }
+  }
+
   render() {
     const options = this.searchString
       ? this.fuse.search(this.searchString)
@@ -87,14 +97,6 @@ export class ArchivedItemStateFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
-            >("btrix-change", {
-              detail: { value: this.selectedStates },
-            }),
-          );
         }}
       >
         ${this.states?.length
@@ -250,8 +252,9 @@ export class ArchivedItemStateFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value as CrawlState, checked);
-          this.requestUpdate("selectedStates");
+          this.selected = new Map(
+            this.selected.set(value as CrawlState, checked),
+          );
         }}
       >
         ${repeat(

frontend/src/features/archived-items/archived-item-tag-filter.ts

@@ -20,6 +20,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { isFocusable } from "tabbable";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { type FilterChip } from "@/components/ui/filter-chip";
 import type { BtrixChangeEvent } from "@/events/btrix-change";
 import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { stopProp } from "@/utils/events";
@@ -57,17 +58,14 @@ export class ArchivedItemTagFilter extends BtrixElement {
   });
 
   @state()
-  private get selectedTags() {
-    return Array.from(this.selected.entries())
-      .filter(([_tag, selected]) => selected)
-      .map(([tag]) => tag);
-  }
-
-  private selected = new Map<string, boolean>();
+  selected = new Map<string, boolean>();
 
   @state()
   private type: "and" | "or" = "or";
 
+  @query("btrix-filter-chip")
+  private readonly filterChip?: FilterChip | null;
+
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("tags")) {
       if (this.tags) {
@@ -78,6 +76,25 @@ export class ArchivedItemTagFilter extends BtrixElement {
     }
   }
 
+  updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected")) {
+      const selectedTags = Array.from(this.selected.entries())
+        .filter(([_tag, selected]) => selected)
+        .map(([tag]) => tag);
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
+        >("btrix-change", {
+          detail: {
+            value: selectedTags.length
+              ? { tags: selectedTags, type: this.type }
+              : undefined,
+          },
+        }),
+      );
+    }
+  }
+
   private readonly orgTagsTask = new Task(this, {
     task: async () => {
       const { tags } = await this.api.fetch<WorkflowTags>(
@@ -105,18 +122,6 @@ export class ArchivedItemTagFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
-            >("btrix-change", {
-              detail: {
-                value: this.selectedTags.length
-                  ? { tags: this.selectedTags, type: this.type }
-                  : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.tags?.length
@@ -304,8 +309,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value, checked);
-          this.requestUpdate("selectedTags");
+          this.selected = new Map(this.selected.set(value, checked));
         }}
       >
         ${repeat(

frontend/src/features/crawl-workflows/workflow-profile-filter.ts

@@ -57,7 +57,8 @@ export class WorkflowProfileFilter extends BtrixElement {
     keys: ["id", "name", "description", "origins"],
   });
 
-  private selected = new Map<string, boolean>();
+  @state()
+  selected = new Map<string, boolean>();
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("profiles")) {
@@ -69,6 +70,26 @@ export class WorkflowProfileFilter extends BtrixElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("selected")) {
+      const selectedProfiles = [];
+
+      for (const [profile, value] of this.selected) {
+        if (value) {
+          selectedProfiles.push(profile);
+        }
+      }
+
+      this.dispatchEvent(
+        new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
+          detail: {
+            value: selectedProfiles.length ? selectedProfiles : undefined,
+          },
+        }),
+      );
+    }
+  }
+
   private readonly profilesTask = new Task(this, {
     task: async () => {
       const query = queryString.stringify(
@@ -105,22 +126,6 @@ export class WorkflowProfileFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          const selectedProfiles = [];
-
-          for (const [profile, value] of this.selected) {
-            if (value) {
-              selectedProfiles.push(profile);
-            }
-          }
-
-          this.dispatchEvent(
-            new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
-              detail: {
-                value: selectedProfiles.length ? selectedProfiles : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.profiles?.length
@@ -160,17 +165,7 @@ export class WorkflowProfileFilter extends BtrixElement {
                       this.checkboxes.forEach((checkbox) => {
                         checkbox.checked = false;
                       });
-
-                      this.dispatchEvent(
-                        new CustomEvent<BtrixChangeEvent["detail"]>(
-                          "btrix-change",
-                          {
-                            detail: {
-                              value: undefined,
-                            },
-                          },
-                        ),
-                      );
+                      this.selected = new Map();
                     }}
                     >${msg("Clear")}</sl-button
                   >`
@@ -343,7 +338,7 @@ export class WorkflowProfileFilter extends BtrixElement {
         @sl-change=${async (e: SlChangeEvent) => {
           const { checked, value } = e.target as SlCheckbox;
 
-          this.selected.set(value, checked);
+          this.selected = new Map(this.selected.set(value, checked));
         }}
       >
         ${repeat(