From 7ba218a094968a29a310645d958cc14fdb8db1ee Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Mon, 22 Jan 2024 22:14:14 +0000
Subject: [PATCH] Use data-action to listen to w-swap:success in
 DrilldownController

and rename the method to updateParamsCount
---
 client/src/controllers/DrilldownController.ts | 41 ++++++++-----------
 .../shared/headers/slim_header.html           |  2 +-
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/client/src/controllers/DrilldownController.ts b/client/src/controllers/DrilldownController.ts
index 4620c07df5..b97b92ad6a 100644
--- a/client/src/controllers/DrilldownController.ts
+++ b/client/src/controllers/DrilldownController.ts
@@ -8,38 +8,31 @@ export class DrilldownController extends Controller<HTMLElement> {
   };
 
   declare activeSubmenuValue: string;
-  declare swapSuccessListener: (e: Event) => void;
 
   declare readonly menuTarget: HTMLElement;
   declare readonly toggleTargets: HTMLButtonElement[];
 
   connect() {
     this.updateToggleCounts();
-
-    this.swapSuccessListener = (e: Event) => {
-      const swapEvent = e as CustomEvent<{ requestUrl: string }>;
-      if ((e.target as HTMLElement)?.id === 'listing-results') {
-        const params = new URLSearchParams(
-          swapEvent.detail?.requestUrl.split('?')[1],
-        );
-        const filteredParams = new URLSearchParams();
-        params.forEach((value, key) => {
-          if (value.trim() !== '') {
-            // Check if the value is not empty after trimming white space
-            filteredParams.append(key, value);
-          }
-        });
-        const queryString = '?' + filteredParams.toString();
-        this.updateToggleCounts();
-        window.history.replaceState(null, '', queryString);
-      }
-    };
-
-    document.addEventListener('w-swap:success', this.swapSuccessListener);
   }
 
-  disconnect() {
-    document.removeEventListener('w-swap:success', this.swapSuccessListener);
+  updateParamsCount(e: Event) {
+    const swapEvent = e as CustomEvent<{ requestUrl: string }>;
+    if ((e.target as HTMLElement)?.id === 'listing-results') {
+      const params = new URLSearchParams(
+        swapEvent.detail?.requestUrl.split('?')[1],
+      );
+      const filteredParams = new URLSearchParams();
+      params.forEach((value, key) => {
+        if (value.trim() !== '') {
+          // Check if the value is not empty after trimming white space
+          filteredParams.append(key, value);
+        }
+      });
+      const queryString = '?' + filteredParams.toString();
+      this.updateToggleCounts();
+      window.history.replaceState(null, '', queryString);
+    }
   }
 
   open(e: MouseEvent) {
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index 29063c2315..d7f0429aab 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -79,7 +79,7 @@
                         {% endif %}
 
                         {% if filters %}
-                            <div class="w-drilldown" data-controller="w-drilldown">
+                            <div class="w-drilldown" data-controller="w-drilldown" data-action="w-swap:success@document->w-drilldown#updateParamsCount">
                                 {% fragment as toggle_suffix %}
                                     <span class="w-drilldown__count" hidden></span>
                                 {% endfragment %}