diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index 2f1bceaf4d..9e8c60c5ed 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -13,13 +13,20 @@ describe("Dropdown controller", () => {
 
   describe("Controller", () => {
     beforeEach(() => {
-      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 expandedCLass2" data-collapsed-class="collapsedClass" />
-        </span>
-        <div id="menu" data-dropdown-target="menu" >
-
-        </div>
+      document.body.innerHTML = `<div id="container">
+        <details data-controller="dropdown" id="dropdown">
+          <summary id='summary'>
+            <span class="icon-reorder">
+            Actions
+            </span>
+          </summary>
+          <div id = "menu" class="menu" data-action="click->dropdown#closeOnMenu">
+            <div class="menu_item">
+              <span>Item 1</span>
+              <span>Item 2</span>
+            </div>
+          </div>
+        </details>
       </div>`;
     });
 
@@ -27,48 +34,15 @@ describe("Dropdown controller", () => {
       document.body.innerHTML = "";
     });
 
-    it("hide menu by default", () => {
-      const menu = document.getElementById("menu");
-      expect(menu.classList.contains("hidden")).toBe(true);
-    });
-
-    it("show menu when toggle and add/remove class on arrow", () => {
-      const dropdown = document.getElementById("dropdown");
-      const arrow = document.getElementById("arrow");
-      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);
-
+      //open the details
+      dropdown.toggleAttribute('open') 
+      //click elsewhere
       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);
+      expect(dropdown.open).toBe(false);
     });
   });
 });
diff --git a/spec/system/admin/order_spec.rb b/spec/system/admin/order_spec.rb
index 8ec2dc5867..b4de995c69 100644
--- a/spec/system/admin/order_spec.rb
+++ b/spec/system/admin/order_spec.rb
@@ -719,7 +719,7 @@ describe '
             it "should not display links but a js alert" do
               visit spree.edit_admin_order_path(order)
 
-              find("#links-dropdown .ofn-drop-down").click
+              find("#links-dropdown .ofn-drop-down details").click
               expect(page).to have_link "Send Invoice", href: "#"
               expect(page).to have_link "Print Invoice", href: "#"
 
@@ -729,7 +729,7 @@ describe '
               expect(message)
                 .to eq "#{distributor1.name} must have a valid ABN before invoices can be used."
 
-              find("#links-dropdown .ofn-drop-down").click
+              find("#links-dropdown .ofn-drop-down details").click
               message = accept_prompt do
                 click_link "Send Invoice"
               end
diff --git a/spec/system/admin/orders_spec.rb b/spec/system/admin/orders_spec.rb
index b9f29d296b..22bd0b7841 100644
--- a/spec/system/admin/orders_spec.rb
+++ b/spec/system/admin/orders_spec.rb
@@ -497,8 +497,9 @@ describe '
         expect(page.find(
                  "#listing_orders tbody tr td:first-child input[type=checkbox]"
                )).to_not be_checked
-        # disables print invoices button
-        page.find("span.icon-reorder", text: "ACTIONS").click
+        # disables print invoices button not clickable
+        expect { find("span.icon-reorder", text: "ACTIONS").click }
+          .to raise_error(Capybara::Cuprite::MouseEventFailed)
         expect(page).to_not have_content "Print Invoices"
       end
     end