Merge pull request #356 from nileshbhagwat/fix/355

fix: prevent menu toggle on right-click (#355)

src/_baseMenu.js

@@ -1407,6 +1407,10 @@ class BaseMenu {
     function toggleToggle(menu, toggle, event) {
       preventEvent(event);
 
+      if (event.button !== 0) {
+        return;
+      }
+
       toggle.toggle();
 
       if (toggle.isOpen) {

tests/menus/_baseMenu/click.test.js

@@ -312,5 +312,47 @@ describe("BaseMenu", () => {
 
       expect(menu.focusState).toBe("none");
     });
+
+    // Test that pointerup does not toggle submenu when event.button is not 0.
+    it("should not toggle submenu when event.button is not 0", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      // Spy on toggle.
+      const spy = vi.spyOn(menu.elements.controller, "toggle");
+
+      // Simulate a pointerup event with button property set to 1.
+      simulatePointerEvent("pointerup", menu.elements.controller.dom.toggle, {
+        button: 1,
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    // Test that pointerup toggles submenu when event.button is 0.
+    it("should toggle submenu when event.button is 0", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      // Spy on toggle.
+      const spy = vi.spyOn(menu.elements.controller, "toggle");
+
+      // Simulate a pointerup event with button property set to 0.
+      simulatePointerEvent("pointerup", menu.elements.controller.dom.toggle, {
+        button: 0,
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
   });
 });

tests/menus/helpers.js

@@ -72,8 +72,15 @@ export function simulatePointerEvent(eventType, element, options = {}) {
     const event = new PointerEvent(eventType, {
       bubbles: true,
       cancelable: true,
-      ...options,
     });
+
+    // Manually assign read-only properties after the event is created
+    Object.keys(options).forEach((key) => {
+      if (key in event) {
+        Object.defineProperty(event, key, { value: options[key] });
+      }
+    });
+
     element.dispatchEvent(event);
     return event;
   } catch (error) {