It is impossible to type fractional digits on InputNumber

[julianomqs]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/inputnumberbug-5shee

Current behavior
It is impossible to type the fractional part of a number (decimals or cents) because it is not possible to type commas or dots.

Expected behavior
Be able to type the fractional part of a number (decimals or cents) of a number.

Minimal reproduction of the problem with instructions
In the codesandbox above or in the PrimeReact InputNumber showcase, try to input a value with fractional digits, e.g 1500.50.

You will see it's not possible to type the dot or comma, so it is impossible to type the fractional part of a number.

Please tell us about your environment:
OS: Ubuntu 18.04
Node version: v12.16.1
NPM version: 6.13.4

• React version: ^16.13.1

• PrimeReact version: ^4.2.1

• Browser: Chrome 83.0.4103.61 but I think it will happen in any other browser

• Language: TypeScript 3.9.3 and JS

Observation
This situation occurs too in the PrimeVue InputNumber component.

[igor-co]

Same problem.

[VsevolodGolovanov]

This is probably caused by the desire to guarantee a value of a number type only. But this goal seems impossible. If the user typed in "123," - that's a string. You can't convert it to a number without losing information that the user intends to type a fraction part. If the component would keep an internal string buffer that comes with its own problems too. Yes, instead of a string buffer you can e.g. keep some sort of "user started a fraction" boolean - makes no difference. Internal hidden state WILL get stale, out of sync, there is just no way around it. You need to expose it.

So IMHO...

1. InputNumber's default value/onChange contract should be that it could be a number of a string.
2. Maybe InputNumber should provide alternative API (onChangeNumber?) for cases that are interested only in number, it works with a hidden internal string buffer.
3. InputNumber should forcefully coerce string to number at certain moments like blur. These moments could be configurable.

[VsevolodGolovanov]

Same problem (immediately coercing to valid number value on each keypress) makes it hard to input values if you have something like min={10} max={200} set. A lot of invalid intermediate states.

[suatalim]

Same problem. Needs some improvements over typing experience. It's nearly impossible to enter the desired decimal number.
Also "del" button not updating value.

[julianomqs]

Why this is an enhancement? It is clearly a bug.

[mertsincan]

Hi,

Thanks a lot for all feedbacks! On 5.0, the decimal separator can be typed in inputNumber. In addition, some enhancements were made according to the feedbacks received in this component.

• Del key support
• Range insert fix
• Cursor position after multiple values is inserted
• Paste issues
  etc.

Thanks again!
Best Regards,

[maximilianweidenauer]

I'm on version 5.0.0-rc.1 and I still can't put a decimal separator in InputNumber

[Anubarak]

@mertsincan Unfortunately I still cannot type decimal separators in the examples here and I cannot delete them.
Are there any special attributes you need to set?

[VsevolodGolovanov]

Continued in #1768.

[melloware]

Here is my 8.0.0 sandbox of this can someone try and replicate the issue again please.

See: https://codesandbox.io/s/primereact-test-forked-fd0ukd?file=/src/index.js