React-number-format: Comma character could be taken as period(default decimalSeparator)

[DeylEnergy]

Hello. There is a little problem that took me a long time. How to make so that the component treats ',' as '.'? Tried to manually invoke NumberFormat.prototype.onKeyDown from onKeyDown prop including SyntheticEvent with key replaced to '.'

Is there an escape hatch for it? Will appreciate any suggestions.

[duncanawerbuck]

@DeylEnergy, have you tried setting the thousandSeparator and decimalSeparator props?

They're documented here.

[DeylEnergy]

Thank you @duncanawerbuck I already tried to change things around those props. The thing is I try to set decimalSeparator to , form could take both . and ,. However, I want , to work as . set to decimalSeparator. Even tried to literally change the key property of event to . when onKeyDown takes , as key property

[duncanawerbuck]

make so that the component treats ',' as '.'

I'm not sure I understand. The component considers two things:

• Which character you would like to be the thousand separator. If you use US/UK number formatting, you would specify , as the thousandSeparator prop. Note that this isn't something that the user types. You also dont' have to set it at all if you don't want a thousand separator to appear. If you have specified it, the component will automatically insert it when a certain number of digits are entered.
• Which character the user will type to indicate they are about to type decimal values.

So assuming US/UK formatting, consider a user who might wish to enter "one thousand dollars and fifty cents" (they want to end up seeing 1,000.50).

Step 1: They type 1 (note they cannot type ,)
Step 2: They type 0 (they see 10 - no formatting has been applied)
Step 3: They type 0 (they see 100 - no formatting has been applied)
Step 4: They type 0 (they see 1,000 - the thousand separator, i.e. comma, is automatically displayed)
Step 5: They now wish to add the fifty cents, so they press . (they see 1,000.). The value at this point is "one thousand".
Step 6: They type 5 (they see 1,000.5)
Step 7: They type 0 (they see 1,000.50)

If you don't want US/UK format and wanted e.g. 1000,50 to represent "one thousand dollars and fifty cents", you can leave thousandSeparator _unset_ and set decimalSeparator to ,. Note that if you did this, then the user still cannot type a thousand separator. If they type a , _or_ a . with this configuration, this will be interpreted as a decimal separator. So in this second scenario, typing 1,500 is interpreted as "one and a half" (e.g. the user may wish to enter 1,50062262 (a value ever so slightly higher than one and a half).

Hope that makes sense.

[DeylEnergy]

@duncanawerbuck thanks for elaborating on this. I might haven't explained clearly, what I want. My problem is:

• I use period as a decimalSeparator
• When I type comma key on my keyboard it should act as I tapped period key.
• Experiment. If you try to set decimalSeparator to ','(comma). Then, it can take comma and period keys as if you typed comma. I want the same effect, but for decimalSeparator='.'

[duncanawerbuck]

I understand now.

The library’s API doesn’t currently support that.

Intercepting and translating keystrokes feels a bit like you would be fighting against the library.

I agree that the current implementation is inconsistent in the way you describe, but I only see two options for the library itself that could work for you:

• Introduce what you describe as default behaviour, but I can’t imagine that a majority of people would actually want this as a default
• Introduce additional configuration to allow a user to supply an array of acceptable decimal input keys. This would increase the surface area of the API, probably adding more confusion to people new to the library.

So sorry, I don’t have a good solution to recommend.

However, if the maintainers don’t want to address this (IMO, the value is questionable, but you know your users better than I do!), you could always dig into the code, fork this library and implement it yourself.

Good luck!

[DeylEnergy]

Thanks for the good response. Really appreciate your willingness to help. I'll give it one more try.

[s-yadav]

Supporting typing . when decimalSeparator is , was added to allow user who have works on multiple locale. This was added based on multiple feature request #223, #261, #133.
I can understand that the same can be required for the opposite case. As only , and '.' are valid decimal separator. Though I am not very sure if it can cause confusion to the user if they try to manually type thousand separator which will be interpreted as decimal. (But then same thing can happen when decimalSeparator is ',' and thousandSeparator is '.')

We can add that the coversion here.
https://github.com/s-yadav/react-number-format/blob/master/src/number_format.js#L610

I will be happy to accept a PR with test cases to support your use case.

[macobo]

We ran into a related issue on mobile:

In our case all countries we support either use . or , as decimal separator. We want to show the number keyboard on mobile.

The best way to do so is via inputmode="decimal". However some of our users ran into trouble when their locale expects . as separator but their phone locale shows , as default keyboard entry. In that mode they have no way to enter decimal numbers at all.

A solution which allows adding a prop such as allowedDecimalSeparators would work perfectly, gonna take a look at this.

[s-yadav]

This is added with #345. Closing this.