NumberInput control should support formatted values

[PaulJThompson]

The NumberInput control should support formatted values (according to a consumer-specified locale). For example, in English, it would show the , (comma) character as a thousands separator and the . (period) character as a decimal separator.

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Is this issue related to a specific component?

The NumberInput control.

What did you expect to happen? What happened instead? What would you like to
see changed?

I expect that I can enter a value like "50,000" if the range is between 1 and 100,000. Entering "50,000" in this case shows as an error.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v7.28.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

IBM Cognos Analytics. This worked in our product in the previous version using our own internal toolkit, so this is technically a regression for us.

Steps to reproduce the issue

1. Go to https://www.carbondesignsystem.com/components/number-input/usage
2. In the Usage, set the max value to {100000}
3. In the Number Input control, type "50,000" without the double quotes.

Note the error.

[joshblack]

@PaulJThompson do you or your team know if this would require us to switch the underlying input type to text or is there a technique to do this with a type="number" input control??

[PaulJThompson]

In our old NumberInput control, we treat it as text when the user enters it, do a bunch of checks and string manipulation to extract what we call the "raw" value and store that internally. Only once we render it do we convert it to a formatted Number according to the user's locale. One of our bugs that our non-English users complained about was that when they entered a number, they still had to follow English conventions (ie. the '.' character as the decimal character). We were about to tackle that when we were told to adopt Carbon so the effort was put on hold. You can see it "in action" here.

[thyhmdo]

Adding the similar ask on Slack