react-numeric-input icon indicating copy to clipboard operation
react-numeric-input copied to clipboard

Unable to type minus once right after blur/focus of controlled input

Open insolite opened this issue 7 years ago • 0 comments

STR

  1. Create and render controlled NumericInput component (using value/onChange and external state for example)
  2. Focus on input
  3. Clear value completely
  4. Click outside input to lose focus
  5. Focus on input again
  6. 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:

  1. On focus lose onBlur makes state.value become NaN (parseFloat("") => NaN)
  2. When - is typed onChange is called and set state.value to null.
  3. componentDidUpdate performs check for changed state, considers value changed (NaN !== null) and calls onChange callback (from props)
  4. Parent component receives null value, passes it to the child NumericField.
  5. NumericInput renders null as 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:

  1. Type any value like 123
  2. Select entire value
  3. 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?

insolite avatar Feb 01 '18 12:02 insolite