Hi @david!
I have been investigating the issue and I can now share my findings.
The input type "number" is in theory a nice and handy tool, but it (unfortunately) suffers of a few issues:
It does a lot of work under the hood, which could be nice in some cases but not when you want to have good control on the content of the input.You cannot programmatically get the content of the field while the user is typing. Instead, the "value" attribute is changed after a new key is pressed and set to either the new number (if it's valid) or "" (if invalid), making developers lose control.Its behavior depends not only on the browser you're using (which is already a problem in this case), but also on the locale defined by the field/page/browser.
You can find more info on this page https://www.ctrl.blog/entry/html5-input-number-localization
There could be of course other ways to fix this:
Use the "pattern" attribute. This allows to show (on iOS) a numeric keyboard, but with no decimal separator.Use the input type "tel". This shows the phone keyboard, that has no decimal separator, on both Android and iOS
Imo the very best would be to be able to have option 1 with a comma/period, but I think I will go for now with option 2 and a custom input system for mobile to overcome the missing separator on the keyboard (I think PayPal is having the same issue, check a paypal.me page😅).
Any more input is appreciated! 😁
Nicola Parrello
Painter, party planner and Frontend Developer @ bunq