I have created an input component (InputComponent) using react-number-format. This component accepts only a string numerical value with one decimal. Example: "12.5" or "12" but not "12.55".
This works.
However when I use InputComponent to build another component (BiggerComponent), the input loses its focus on each key stroke.
I just solved it by moving the function that uses NumberFormat outside the Input function.
I think that if it is inside the Input function, the whole NumberFormat functions gets re-created at each key stroke. That's why it looses focus.
Not working example: (with the function that uses NumberFormat inside the Input function) https://codesandbox.io/s/festive-ishizaka-bvktl
Working example: (with the function that uses NumberFormat outside the Input function) https://codesandbox.io/s/great-snow-1h3ln
