Formik: Chrome autofill on password input issue

[Sklico]

Hi, I have a problem with autofill on my password input. I use HOC withFormik. When I access the page, chrome fills my last login e-mail and password. This is completely fine. But, when I try to edit password input and start typing, after first change the input value is reset to the remembered password. There are exactly two change events, one with my new value and the second one with the old autofilled value and it rewrites my change. After that, any change is fine, there is only one change event and I can edit the input value. Could anyone help me with this?

[jaredpalmer]

Are you using mapPropsToValues in your form?

[Sklico]

Yeah, of course.
mapPropsToValues: () => ({ email: '', password: '', showPassword: false }),

I'm not really sure if this issue is duplicate to the iOS Chrome autofill issue. I think I have little bit different problem, which has nothing common with iOS or that autofill doesn't work. Chrome autofill works in my form, but for unknown reason, there are two change events in first attempt of change my password input value. The only common thing is Chrome autofill. If it is the reason for duplicate label, then ok, I'm sorry for create duplicity.

[jaredpalmer]

The reason for double events is the change (values) and validation (touched) are firing off. Can you create a codesandbox so I can take a look?

[Sklico]

Yeah, sure - https://codesandbox.io/s/yp8wwrvq1z

I have the same problem in codesandbox, so hopefully, you can see the issue.

[Sklico]

@jaredpalmer Hi, can I ask you, if there is any progress in this issue ? Thanks

[chamupathiBlimpIT]

+1 any updates on this?

[dVenturousDani]

Is this a problem with the HOC implementation only?

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[Sklico]

@jaredpalmer hey man, I think that "stale" label is a mistake here, because I'm still waiting for your response to my issue. I still have this issue and I still need help with that. Thanks

[intelligentspark]

+1 this issue!

[daveycakes]

I think I'm seeing the same issue when LastPass is used to generate a password in an editing form.

[jaredpalmer]

We fixed this internally on one of our forms. Will get our hacky workaround out of source now.

[jaredpalmer]

This is unfortunately an upstream React issue: https://github.com/facebook/react/issues/1159

FWIW our hacky workaround solution adds an event listener to the each ref. Also note, that we actually are not even using Formik on this form.

```js
email = React.createRef();
password = React.createRef();

componentDidMount() {
// Temporary fix for https://github.com/facebook/react/issues/1159
this.email.current!.addEventListener('change', this.handleChange);
this.password.current!.addEventListener('change', this.handleChange);
}
``

[jaredpalmer]

Going to close this this issue as this is not a Formik bug.