Trouble combining keyup event, key name and modificator "once"

[lozunoff]

Hello!

An issue has been found combining the keyup event, key name, and "once" modifier.

<input x-on:keyup.enter.once="..." />

This example doesn't work.

Presumably the problem is related to the order in which modifiers are processed in the

alpine/packages/alpinejs/src/utils/on.js

Line 66 in ca6ae29

if (modifiers.includes('once')) {

.

If you move the processing of the "once" modifier higher in the code (up to line 41) - everything is ok. Example:

https://github.com/lozunoff/alpine/blob/88691edde975387eb5b479db4f711527648717ad/packages/alpinejs/src/utils/on.js#L41

[SimoTod]

@lozunoff It works okay without any changes for me: https://codepen.io/SimoTod/pen/OJOqXqW
Do you have a concrete example showing the issue? If it turns up it's a real issue, you should add a test that would fail with the current implementation and pass with the fix in your PR to demonstrate the fix and prevent future regressions.

[lozunoff]

@SimoTod My example is almost the same as yours.

And your example doesn't work for me either.

To reproduce the problem, you need to enter any character in the input field (for example, 1) and then press "Enter". In this case, the alert will not appear.

Apparently, after entering the first character, the handler is removed and no one else listens for pressing the "Enter" key.

Tested on different computers and different browsers.

Mac OS 12.2.1:
Safari 15.3 (17612.4.9.1.8)
Chrome 99.0.4844.51

Windows 11:
Chrome 99.0.4844.51

[SimoTod]

Ah, okay. It wasn't clear to me on your initial description so I just tried pressing enter directly the first time. I got it now, well spotted. 👍
As a generic suggestion, adding a test to show the problem and the fix will make your PR easier to review when the maintainer will look at it.

[lozunoff]

@SimoTod Thanks! Test in PR added.