React-number-format: Weird behaviour: Formik + React Number Format

[luis-carlos-campos]

I was facing the same issue described here:
https://github.com/s-yadav/react-number-format/issues/277

Right after I applied suggestions, I faced a weird behavior:

Check codebox below:
https://codesandbox.io/s/zn84pljwo3

Steps to reproduce:
1 - Fill both inputs (12 for example)
2 - Click on R$ button

Expected Behaviour:
Both inputs are cleared.

Current Behaviour:
Only first input is cleared

Whenever initialValues is changed enableReinitialize forces all inputs to be reseted to initialValues (null).

However, If I have a dynamic prefix...
Right after the onChange that sets react-number-format to null (initialValues), another onChange is triggered with the old State.

Any thoughts on that?

[s-yadav]

Formik is calling the renderProps twice synchronously in one execution cycle once with the prefix change and once with reset values.

This causing the following flow for the number format.

• NumberFormat is called with prefix change.
• It sees the format prop (prefix here) is changed so it calculates the new formatted value and updates the local state.
• On the callback of setState number-format calls onValueChange as the formatted value is changed . setState callback is called asynchronously (on the next tick).
• Before the setState callback is called, Formik is calling the renderProp synchronously again with the reset value.
• But after the onValueChange is called from the setState callback, value is changed back to the previous value.

I feel that the fix should happen on the Formik side. It should either batch the updates, or call the render props in different ticks. But I will see if I can do anything for the fix.

[luis-carlos-campos]

Gotcha.
I appreciate your time.
Thank you so much!

[s-yadav]

This is fixed in 4.4.1.