Number input does not work for all locales

[simonihmig]

The input control with type=number calls parseFloat() to return a proper number as the form value. But this does not take different locals into account, e.g. those that use a comma as the decimal separator.

We could make use of e.g. https://github.com/ApelegHQ/intl-number-parser or some equivalent npm package or bring our own implementation.

[ErvinSabic]

So about this @simonihmig

<input type="number" /> is bad at supporting this kind of localization. From my testing by changing my location through chrome dev tools, if I set my country to say Germany, inputting "1.234,56" is not allowed.

From my testing regardless of the user's locale, they need to input "1234.56".

My initial idea was to implement this by changing the number input into a text input and handling the formatting on a "focus out" event. The issue with this is the data is changed by the focus out event, then changed in the text input as well.

In my instance, if I input "1.234,56" then focus out, inside of the text box it gets turned into "1234.56", great. That's how the data I presume is expected to be saved in terms of the data. This is something I understand as a developer.

However, if I, as a confused user go to click on the box again (because my number changed, what the heck?!) and unclick it, my "1234.56" is now turned into "123456", which is a far cry from the intended number.

Now if we really want to implement this, we're going to need to take it a step further just for the number inputs to keep a version of the data that is the "saved number" that is used as the actual data for the form and the "formatted number" that is shown to the user in text box. We can also probably just handle the parsing on submission or during the validation step.

But I had a thought:

As an American who has absolutely 0 idea on how people in other parts of the world use number inputs, are they used to following the US decimal system (1234.56) when needing to input these numbers? Or is there the expectation that their locale is supported?

I can implement a solution but it may come across more complicated than I might like for something like this. Just for those pesky number inputs!

If people are used to using number inputs as they've always been on the internet (only supporting numbers and "." as far as I can tell), they may find it confusing when they're suddenly expected to use their locale which may cause a mis-input.

I'll be asking some people around the world what their expectation is when they go to fill out forms online and report back. But I wanted to hear your thoughts on this.

[ErvinSabic]

I might just make a whole other localized number input component and just leave the number type alone so it stays consistent with the rest of the library.