carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

NumberInput control should support formatted values #7819

Open PaulJThompson opened 3 years ago

PaulJThompson commented 3 years ago

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?

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.

NumberInput
joshblack commented 3 years ago

@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 commented 3 years ago

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.

German formatted English formatted

thyhmdo commented 9 months ago

Adding the similar ask on Slack

image