Input loses focus and each key stroke - TextField react-format-number

Question

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.

https://codesandbox.io/s/festive-ishizaka-bvktl

Answer 1

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