react-numeric-input
react-numeric-input copied to clipboard
Unable to type minus once right after blur/focus of controlled input
STR
- Create and render controlled
NumericInputcomponent (usingvalue/onChangeand external state for example) - Focus on input
- Clear value completely
- Click outside input to lose focus
- Focus on input again
- Try to type
-
ER
Input value becomes -
AR
Input value is unchanged (empty). The second press of - makes character appear though.
Conclusion
I guess there is something about NaN/null things in state. What really happens as I see:
- On focus lose
onBlurmakesstate.valuebecomeNaN(parseFloat("") => NaN) - When
-is typedonChangeis called and setstate.valuetonull. componentDidUpdateperforms check for changed state, considers value changed (NaN !== null) and callsonChangecallback (fromprops)- Parent component receives
nullvalue, passes it to the childNumericField. NumericInputrendersnullas empty value.
There is a workaround for this: in parent component check if value was actually changed and only if so, rerender child (perform upper setState). But this will not fix another case:
- Type any value like
123 - Select entire value
- Type
-
The result here appear to be the same as for blur/focus case, so I consider this as a potential issue. Could someone help me?