How to correct warning when "return" is used inside a listener?

[ipontt]

I have a working text input with alpine using x-mask and an extra condition but it's throwing a warning (from alpine inside the livewire.js file). I'm not sure how to go about solving the warning while retaining the functionality, and it's very low priority.

<!-- Accept only numbers and letter k -->
<input
    x-data
    x-mask="99.999.999-*"
    x-on:keydown="return ($event.which >= 48 && $event.which <= 57) || $event.which == 75"
    type="text"
    {{ $attributes }}
/>

I've read on mdn that I should ditch the which property in favor of key but I don't think that's it. The warning I get is

Alpine Expression Error: Unexpected keyword 'return'

Expression: "`return ($event.which >= 48 && $event.which <= 57) || $event.which == 75"

If I write x-on:keydown="($event.which >= 48 && $event.which <= 57) || $event.which == 75" then the thing does nothing. If I use x-on:keydown.prevent I just can't do any inputs.

So I guess my question is how can I write that keydown condition in a correct way using alpinejs?

[SimoTod]

What are you trying to achieve with return a value (yeah, you can't do it as it won't make sense). If you want to invalidate the keydown, use if(condition) $event.preventDefault()

[ipontt]

The thing is, it's working. If I remove the return, it stops working.
And main issue with doing if (condition) $event.preventDefault is that I lose all keyboard accessibility. (I can't use →, ←, tab, shift+tab, backspace, delete, enter, escape) whereas my current (kinda incorrect) approach allows me to retain it without having to specify all those extra keys in the condition.

[SimoTod]

when you say, it's working, what do you mean exactly? Can you describe exactly what you want to do. The mask is naturally preventing you from any non numeric character, except for the very last one. Your code suggest you only wants numbers or the letter K but I can freely use any other letter when I try.

[ipontt]

That's odd, it actually does restrict me from using anything other than a number or K. I only opened this discussion to see if I could get rid of the warning. Could you share your user agent? I was using Safari and I thought I'd tested it on Chrome as well, but if you say the mask with the return on it is not working on your end then this is no longer a viable solution.

[SimoTod]

Chrome 126.0.6478.183 on Mac Sonoma (M2 chipset). I can type any letters.

As far as I know, returning false on keydown (standard event) is not part of any specs so I wouldn't rely on it (Although it used to work everywhere, not sure if it's still the case). What you really want is a dynamic mask

<input
    x-data
    x-mask:dynamic="$input.substr(11,1) == 'K' ? '99.999.999-K' : '99.999.999-9'"
    type="text"
/>

[ekwoka]

I also want to comment that I don't know where you are getting this which property from, but it should be code

[SimoTod]

It's an old deprecated property: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which

[ipontt]

Thanks for the input. I was overcomplicating things in my head but that dynamic mask looks very good

[ekwoka]

the expression is already returned.

That's how it works.

So this expression becomes return return (technically status.result = return ...).

So there shouldn't be any different behaviors.

Can you clarify what you really want to happen?

[ipontt]

That makes sense. I couldn't tell you why, but it worked in my browser even with the added return. The dynamic mask proposed by @SimoTod did the trick though.