🐛 Allows all mouse events

alpinejs · May 14, 2024 · 7236a17 · 7236a17
1 parent 08d9b01
commit 7236a17
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 7 deletions.
diff --git a/packages/alpinejs/src/utils/on.js b/packages/alpinejs/src/utils/on.js
@@ -106,13 +106,14 @@ function kebabCase(subject) {
 function isKeyEvent(event) {
     return ['keydown', 'keyup'].includes(event)
 }
+
 function isClickEvent(event) {
-    return ['click', 'auxclick'].includes(event)
+    return ['contextmenu','click','mouse'].some(i => event.includes(i))
 }
 
 function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {
     let keyModifiers = modifiers.filter(i => {
-        return ! ['window', 'document', 'prevent', 'stop', 'once', 'capture', 'self', 'away', 'outside'].includes(i)
+        return ! ['window', 'document', 'prevent', 'stop', 'once', 'capture', 'self', 'away', 'outside', 'passive'].includes(i)
     })
 
     if (keyModifiers.includes('debounce')) {
@@ -148,8 +149,8 @@ function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {
         // If all the modifiers selected are pressed, ...
         if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {
 
-            // AND the event is a click. It's a press.
-            if (['click', 'auxclick'].includes(e.type)) return false
+            // AND the event is a click. It's a pass.
+            if (isClickEvent(e.type)) return false
 
             // OR the remaining key is pressed as well. It's a press.
             if (keyToModifiers(e.key).includes(keyModifiers[0])) return false

diff --git a/packages/docs/src/en/directives/on.md b/packages/docs/src/en/directives/on.md
@@ -131,7 +131,7 @@ Here's an example of a button that changes behaviour when the `Shift` key is hel
 </div>
 <!-- END_VERBATIM -->
 
-> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `context` events in most browsers. Similarly, `right-click` events will trigger a `context` event, but will also trigger an `auxclick` event if the `context` event is prevented.
+> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `contextmenu` events in most browsers. Similarly, `right-click` events will trigger a `contextmenu` event, but will also trigger an `auxclick` event if the `contextmenu` event is prevented.
 
 <a name="custom-events"></a>
 ## Custom events

diff --git a/tests/cypress/integration/directives/x-on.spec.js b/tests/cypress/integration/directives/x-on.spec.js
@@ -737,9 +737,9 @@ test(
         } }">
             <button type=button
                 @click.capture="Object.keys(keys).forEach(key => keys[key] = false)"
-                @click.meta="keys.meta = true"
-                @click.ctrl="keys.ctrl = true"
                 @click.shift="keys.shift = true"
+                @click.ctrl="keys.ctrl = true"
+                @click.meta="keys.meta = true"
                 @click.alt="keys.alt = true"
                 @click.cmd="keys.cmd = true">
                     change
@@ -777,3 +777,53 @@ test(
         get("@cmd").as("cmd").should(beChecked());
     }
 );
+
+test(
+    "handles all mouse events with modifiers",
+    html`
+        <div x-data="{ keys: {
+            shift: false,
+            ctrl: false,
+            meta: false,
+            alt: false,
+            cmd: false
+        } }">
+            <button type=button
+                @click.capture="Object.keys(keys).forEach(key => keys[key] = false)"
+                @contextmenu.prevent.shift="keys.shift = true"
+                @auxclick.ctrl="keys.ctrl = true"
+                @dblclick.meta="keys.meta = true"
+                @mouseenter.alt="keys.alt = true"
+                @mousemove.cmd="keys.cmd = true">
+                    change
+            </button>
+            <template x-for="key in Object.keys(keys)" :key="key">
+                <input type="checkbox" :name="key" x-model="keys[key]">
+            </template>
+        </div>
+    `,({ get }) => {
+        get("input[name=shift]").as('shift').should(notBeChecked());
+        get("input[name=ctrl]").as('ctrl').should(notBeChecked());
+        get("input[name=meta]").as('meta').should(notBeChecked());
+        get("input[name=alt]").as('alt').should(notBeChecked());
+        get("input[name=cmd]").as('cmd').should(notBeChecked());
+        get("button").as('button').trigger("contextmenu", { shiftKey: true });
+        get('@shift').should(beChecked());
+        get("@button").trigger("click");
+        get("@button").trigger("auxclick", { ctrlKey: true });
+        get("@shift").should(notBeChecked());
+        get("@ctrl").should(beChecked());
+        get("@button").trigger("click");
+        get("@button").trigger("dblclick", { metaKey: true });
+        get("@ctrl").should(notBeChecked());
+        get("@meta").should(beChecked());
+        get("@button").trigger("click");
+        get("@button").trigger("mouseenter", { altKey: true });
+        get("@meta").should(notBeChecked());
+        get("@alt").should(beChecked());
+        get("@button").trigger("click");
+        get("@button").trigger("mousemove", { metaKey: true });
+        get("@alt").should(notBeChecked());
+        get("@cmd").should(beChecked());
+    }
+);