Fix trouble combining keyup event, key name and modificator "once" (#2731)

packages/alpinejs/src/utils/on.js

@@ -40,6 +40,14 @@ export default function on (el, event, modifiers, callback) {
         })
     }
 
+    if (modifiers.includes('once')) {
+        handler = wrapHandler(handler, (next, e) => {
+            next(e)
+
+            listenerTarget.removeEventListener(event, handler, options)
+        })
+    }
+
     // Handle :keydown and :keyup listeners.
     handler = wrapHandler(handler, (next, e) => {
         if (isKeyEvent(event)) {
@@ -65,14 +73,6 @@ export default function on (el, event, modifiers, callback) {
         handler = throttle(handler, wait)
     }
 
-    if (modifiers.includes('once')) {
-        handler = wrapHandler(handler, (next, e) => {
-            next(e)
-
-            listenerTarget.removeEventListener(event, handler, options)
-        })
-    }
-
     listenerTarget.addEventListener(event, handler, options)
 
     return () => {

tests/cypress/integration/directives/x-on.spec.js

@@ -239,6 +239,25 @@ test('.once modifier with @keyup',
     }
 )
 
+test('.once modifier with @keyup and specified key',
+    html`
+        <div x-data="{ count: 0 }">
+            <input type="text" x-on:keyup.enter.once="count = count+1">
+
+            <span x-text="count"></span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('0'))
+        get('input').type('f')
+        get('span').should(haveText('0'))
+        get('input').type('{enter}')
+        get('span').should(haveText('1'))
+        get('input').type('{enter}')
+        get('span').should(haveText('1'))
+    }
+)
+
 test('.debounce modifier',
     html`
         <div x-data="{ count: 0 }">