BUG: FastField causes race condition on Chromes autofill

This is a bug

Current Behavior

When doing autofill (autocomplete) multiple times, FastField sometimes doesn’t register the change on the field where the autofill is used. At other times, when a new value from autofill is selected, the old one pops right back. I suspect that this is some sort of race condition.

Additional Information

You have to play around with it a little bit to see this happening. Make sure you have at least two autofill options to reproduce and switch between them to see old value appearing.

Video: https://www.youtube.com/watch?v=869xNEs6fe0

---

• Formik Version: 1.0.0-alpha.4
• React Version: ^16.3.1
• TypeScript Version: None
• CodeSandbox Link: https://codesandbox.io/s/qqlkvpwpz6
• OS: OS X
• Node Version: v8.9.0
• Package Manager and Version: Yarn 1.3.2
• Browser: Chrome 65.0.3325.181

[aaronnuu]

This issue is due to the fix to allow FastField to accept values from the formik context as it changes. This was needed since you couldn’t imperatively set values using the setFieldX methods, however my suggested fix to add a componentWillReceiveProps method broke a few other things.

It will only happen if auto-fill is changing more than one field but since it doesn’t blur the field that is currently focused after changing it’s value but it does for the other fields, the changes for those fields will propagate up to formik, the focused FastField will receive new props which will contain the previous value and since that is different to it’s current value it will swap back to that.

It’s also an issue if the Form happens to re-render while the user is typing.

I’ve thought about it a little bit and now I would suggest the FastField to be the source of truth for it’s own values and errors rather than the context of the form. This would mean removing the componentWillReceiveProps from FastField and using the same subscription logic as the reset function to setValues and setErrors on FastFields.

I can submit a PR for this soon I just have to get my head around TypeScript a little more to be sure I’m not doing something dumb.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we’ll re-open it.