From 466e43e5719121c52cca3b17a96a26a6b154f4e7 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Wed, 21 Jun 2023 07:49:22 +0100
Subject: [PATCH] Fix "More" dropdown for bulk actions

---
 .../controllers/DropdownController.test.js    | 11 +++++++
 client/src/controllers/DropdownController.ts  |  3 ++
 client/src/includes/bulk-actions.js           | 33 +++++--------------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/client/src/controllers/DropdownController.test.js b/client/src/controllers/DropdownController.test.js
index 12d26dad25..59381ee9b4 100644
--- a/client/src/controllers/DropdownController.test.js
+++ b/client/src/controllers/DropdownController.test.js
@@ -27,4 +27,15 @@ describe('DropdownController', () => {
     expect(toggle.getAttribute('aria-expanded')).toBe('false');
     expect(content).toBe(null);
   });
+
+  it('triggers custom event on activation', () => {
+    const toggle = document.querySelector('[data-w-dropdown-target="toggle"]');
+    const mock = jest.fn();
+    document.addEventListener('w-dropdown:shown', mock);
+    toggle.dispatchEvent(new Event('click'));
+    // Leave time for animation to complete.
+    setTimeout(() => {
+      expect(mock).toHaveBeenCalled();
+    }, 500);
+  });
 });
diff --git a/client/src/controllers/DropdownController.ts b/client/src/controllers/DropdownController.ts
index 8a8df16e88..e3ffe3b04a 100644
--- a/client/src/controllers/DropdownController.ts
+++ b/client/src/controllers/DropdownController.ts
@@ -55,6 +55,9 @@ export class DropdownController extends Controller<HTMLElement> {
           hoverTooltipInstance.disable();
         }
       },
+      onShown() {
+        document.dispatchEvent(new CustomEvent('w-dropdown:shown'));
+      },
       onHide() {
         if (hoverTooltipInstance) {
           hoverTooltipInstance.enable();
diff --git a/client/src/includes/bulk-actions.js b/client/src/includes/bulk-actions.js
index 531420673d..0305447778 100644
--- a/client/src/includes/bulk-actions.js
+++ b/client/src/includes/bulk-actions.js
@@ -10,27 +10,9 @@ const BULK_ACTION_FOOTER = '[data-bulk-action-footer]';
 const BULK_ACTION_NUM_OBJECTS = '[data-bulk-action-num-objects]';
 const BULK_ACTION_NUM_OBJECTS_IN_LISTING =
   '[data-bulk-action-num-objects-in-listing]';
-const MORE_ACTIONS_DROPDOWN_BUTTON_SELECTOR = '.actions [data-dropdown]';
 
 let checkedState = {};
 
-/**
- * Toggles the 'more' dropdown button in listing pages.
- * @param {boolean} show - Determines if the button should be shown or not.
- */
-function toggleMoreActionsDropdownBtn(show) {
-  const moreActionsDropdown = document.querySelector(
-    MORE_ACTIONS_DROPDOWN_BUTTON_SELECTOR,
-  );
-  if (moreActionsDropdown !== null) {
-    if (show === true) {
-      moreActionsDropdown.classList.remove('hidden');
-    } else {
-      moreActionsDropdown.classList.add('hidden');
-    }
-  }
-}
-
 /**
  * Utility function to get the appropriate string for display in action bar
  */
@@ -63,12 +45,9 @@ function onSelectAllChange(e) {
     }
   });
   if (!e.target.checked) {
-    toggleMoreActionsDropdownBtn(true);
     // when deselecting all checkbox, simply hide the footer for smooth transition
     checkedState.checkedObjects.clear();
     document.querySelector(BULK_ACTION_FOOTER).classList.add('hidden');
-  } else {
-    toggleMoreActionsDropdownBtn(false);
   }
 }
 
@@ -128,15 +107,11 @@ function onSelectIndividualCheckbox(e) {
   const numCheckedObjects = checkedState.checkedObjects.size;
 
   if (numCheckedObjects === 0) {
-    /* when all checkboxes are unchecked */
-    toggleMoreActionsDropdownBtn(true);
     document.querySelector(BULK_ACTION_FOOTER).classList.add('hidden');
     document
       .querySelectorAll(BULK_ACTION_PAGE_CHECKBOX_INPUT)
       .forEach((el) => el.classList.remove('show'));
   } else if (numCheckedObjects === 1 && prevLength === 0) {
-    /* when 1 checkbox is checked for the first time */
-    toggleMoreActionsDropdownBtn(false);
     document.querySelectorAll(BULK_ACTION_PAGE_CHECKBOX_INPUT).forEach((el) => {
       el.classList.add('show');
     });
@@ -243,6 +218,14 @@ function addBulkActionListeners() {
   document
     .querySelectorAll(`${BULK_ACTION_FOOTER} .bulk-action-btn`)
     .forEach((elem) => elem.addEventListener('click', onClickActionButton));
+  document.addEventListener('w-dropdown:shown', () => {
+    document
+      .querySelectorAll(`${BULK_ACTION_FOOTER} .bulk-action-btn`)
+      .forEach((elem) => {
+        elem.removeEventListener('click', onClickActionButton);
+        elem.addEventListener('click', onClickActionButton);
+      });
+  });
   const selectAllInListingText = document.querySelector(
     BULK_ACTION_NUM_OBJECTS_IN_LISTING,
   );