[NumberInput] Asymmetric value and onChange parameter

Describe the bug

The value of NumberInput.value has a type of number | undefined, while NumberInput.onChange receives number | null as a parameter.

Suggested solution(s) NumberInput.value should also be intentionally nullable, as described by #243.

[segunadebayo]

I thought about that and tried it. Here are my thoughts:

1. We’d be switching between controlled and uncontrolled mode. As far as I know, that’s not good practice. If it’s controlled, I’d like it to be “fully” controlled, and vice-versa.

2. If the value is 3.45, pressing Backspace up until 3.. If we disallow emitting onChange when there’s a decimal point appended, the value will always be 3. except if the user deletes all (in annoyance 😅).

3. If the user passes the precision prop which rounds the value to specific decimal points. So if the value is 3.4 and precision is 2, the expected output is 3.40 which isn’t possible if we return a number.

For now, the onChange callback will pass string | number, sadly.

I hope you understand what I mean. If you can hack it without any issues, I’d be happy to take a look.

[kripod]

I’ve just released react-typed-inputs, which aims to provide a solution by utilizing inner state. As a bonus, clampAfterBlur and roundAfterBlur options are available.

When overriding type="number" with type="text", the following input sequence can be input without a null result, as seen in this live demo:

12 -> 12. -> 12.3 -> 12.

Unfortunately, React has a bug which results in the decimal point being clamped at the end, resulting in 12 instead of 12. inside the field. On the bright side, Preact works fine and React will also be fixed.