Cursor jumps in input fields with type=number and x-model.number

[drichard]

When you have an input field with x-model.number AND type=number the cursor jumps to the start of the input field when pressing backspace on decimal numbers once you reach the decimal separator. It works fine for plain input fields.

See this fiddle for a reproduction: https://jsfiddle.net/qr0k8yeo/1/

[ekwoka]

I'm not seeing it jump to the start, just it removes the .

so 12.5| backspace 12|

Is this happening in a specific browser?

[drichard]

Thanks for checking Eric. I can reproduce it on Chrome and Safari on Mac and on mobile Safari on iPhone. I haven't tested non-Apple machines.

Here is a quick video captured in Chrome to demonstrate the issue:

Screen.Recording.2024-11-09.at.6.48.16.AM.mov

[ekwoka]

ah, interesting.

[SimoTod]

I think it has something to do with chrome on mac and safari reformatting the number when there's a trailing decimal separator.
Similar issue as an old react bug: facebook/react#11827

When you change the input, x-model updates the variable and, because the values change and there's an effect, it sets the same value back on the input.

On mac, when input type is number, it triggers the browser to reformat the number and remove the decimal separator on Mac (https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-model.js#L121).

As a workaround, you can use x-model.number.unintrusive which doesn't set the value back when the input is focussed (not sure why it's not the default 🤷).

[SimoTod]

actually unintrusive won't work because it keeps the decimal separator when not needed while x-model.number usually reformat the number anyway. It must be something on mac that triggers because the value changes and so the engine is not sure where to put the cursor. Not sure there's much you can do right now as a workaround

[ekwoka]

If you don't need the little steppers, you can just use a normal text input instead of a number input (and use pattern to limit it to numbers)