React-number-format: Input loosing focus when used with Formik

[bernatfortet]

I'm not sure where the problem stems, but basically when using onValueChange with setFieldValues the input loses focus after each key input.

Here's a sandbox that replicates the issue: https://codesandbox.io/s/v0o02wjyl5

[bernatfortet]

It sounds like it's a react-number-format issue. @jaredpalmer from formik created some more examples to illustrate the issue: https://codesandbox.io/s/ppo1kvlwpx
(Ref issue on formik's github: https://github.com/jaredpalmer/formik/issues/958)

[s-yadav]

@bernatfortet,@jaredpalmer I hope the issue has been already figured out. This is because on customInput you are always passing a new function reference which ends up creating a new input element on each re-render, hence loosing the focus.

Instead of doing

customInput={ inputProps => <input type='number' {...inputProps} />}

If you create component outside or render this will be solved.

const Input = inputProps => <input type='number' {...inputProps} />; //do this outside of the component.
...
...
customInput={Input}

Let me know if this solves the problem

[bernatfortet]

@s-yadav thanks for your reply this totally solves my issue!
I've updated the Code Sandbox to reflect your comment: https://codesandbox.io/s/vvr7p5l3x0