Merge pull request #11170 from jibees/11160-bulk-actions-function-not-working-on-safari-mac-browser

Admin, Orders: Make bulk actions dropdown re-enabled for Safari browser

app/views/spree/admin/orders/_bulk_actions.html.haml

@@ -3,13 +3,13 @@
     %span{ "data-controller": "checked-feedback", "data-checked-feedback-translation-value": "spree.admin.orders.index.selected" }
       = t("spree.admin.orders.index.selected", count: 0)
 
-  %button.plain.ofn-drop-down.disabled{ "data-checked-target": "disable" }
+  %div.plain.ofn-drop-down.disabled{ "data-checked-target": "disable", "data-controller": "dropdown", "data-action": "click->dropdown#toggle" }
     %span{ class: 'icon-reorder' }
       ="#{t('admin.actions')}".html_safe
-    %span.toggle-off.icon-caret-up
-    %span.toggle-on.icon-caret-down
+    %span
+      %i{ "data-dropdown-target": "arrow", "data-expanded-class": "icon-caret-up", "data-collapsed-class": "icon-caret-down" }
 
-    %div.menu.dropdown-content
+    %div.menu{ "data-dropdown-target": "menu" }
       %div.menu_item
         %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "resend_confirmation" }
           = t('spree.admin.orders.index.resend_confirmation')

app/webpacker/controllers/dropdown_controller.js

@@ -4,10 +4,20 @@ export default class extends Controller {
   static targets = ["arrow", "menu"];
 
   connect() {
+    this.collapsedClasses = this.arrowTarget.dataset.collapsedClass.split(" ");
+    this.expandedClasses = this.arrowTarget.dataset.expandedClass.split(" ");
     this.#hide();
+    document.addEventListener("click", this.#onBodyClick.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.#onBodyClick);
   }
 
   toggle() {
+    if (this.element.classList.contains("disabled")) {
+      return;
+    }
     if (this.menuTarget.classList.contains("hidden")) {
       this.#show();
     } else {
@@ -15,14 +25,20 @@ export default class extends Controller {
     }
   }
 
+  #onBodyClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.#hide();
+    }
+  }
+
   #show() {
     this.menuTarget.classList.remove("hidden");
-    this.arrowTarget.classList.remove(this.arrowTarget.dataset.collapsedClass);
-    this.arrowTarget.classList.add(this.arrowTarget.dataset.expandedClass);
+    this.arrowTarget.classList.remove(...this.collapsedClasses);
+    this.arrowTarget.classList.add(...this.expandedClasses);
   }
   #hide() {
     this.menuTarget.classList.add("hidden");
-    this.arrowTarget.classList.remove(this.arrowTarget.dataset.expandedClass);
-    this.arrowTarget.classList.add(this.arrowTarget.dataset.collapsedClass);
+    this.arrowTarget.classList.remove(...this.expandedClasses);
+    this.arrowTarget.classList.add(...this.collapsedClasses);
   }
 }

app/webpacker/css/admin/dropdown.scss

@@ -20,14 +20,6 @@
     .dropdown-content {
       display: inline-block;
     }
-
-    .toggle-off {
-      display: inline-block;
-    }
-
-    .toggle-on {
-      display: none;
-    }
   }
 }
 

spec/javascripts/stimulus/dropdown_controller_test.js

@@ -13,9 +13,9 @@ describe("Dropdown controller", () => {
 
   describe("Controller", () => {
     beforeEach(() => {
-      document.body.innerHTML = `<div data-controller="dropdown">
+      document.body.innerHTML = `<div data-controller="dropdown" id="container">
         <span id="dropdown" data-action="click->dropdown#toggle">
-          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass" data-collapsed-class="collapsedClass" />
+          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass expandedCLass2" data-collapsed-class="collapsedClass" />
         </span>
         <div id="menu" data-dropdown-target="menu" >
 
@@ -23,6 +23,10 @@ describe("Dropdown controller", () => {
       </div>`;
     });
 
+    afterEach(() => {
+      document.body.innerHTML = "";
+    });
+
     it("hide menu by default", () => {
       const menu = document.getElementById("menu");
       expect(menu.classList.contains("hidden")).toBe(true);
@@ -34,13 +38,37 @@ describe("Dropdown controller", () => {
       const menu = document.getElementById("menu");
       expect(menu.classList.contains("hidden")).toBe(true);
       expect(arrow.classList.contains("expandedClass")).toBe(false);
+      expect(arrow.classList.contains("expandedClass2")).toBe(false);
       expect(arrow.classList.contains("collapsedClass")).toBe(true);
 
       dropdown.click();
 
       expect(menu.classList.contains("hidden")).toBe(false);
       expect(arrow.classList.contains("expandedClass")).toBe(true);
+      expect(arrow.classList.contains("expandedCLass2")).toBe(true);
       expect(arrow.classList.contains("collapsedClass")).toBe(false);
     });
+
+    it ("hide menu when click outside", () => {
+      const dropdown = document.getElementById("dropdown");
+      const menu = document.getElementById("menu");
+      dropdown.click();
+      expect(menu.classList.contains("hidden")).toBe(false);
+
+      document.body.click();
+
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
+
+    it ("do not display menu when disabled", () => {
+      const dropdown = document.getElementById("dropdown");
+      const container = document.getElementById("container");
+      const menu = document.getElementById("menu");
+      container.classList.add("disabled");
+      
+      dropdown.click();
+
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
   });
 });