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 pletely 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?

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 pletely 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?

• javascript
• reactjs
• autoplete
• autofill
• formik

2 Answers 2

Do you have a initial value set for your inputs? If you don't have a default value set you will also notice a warning in the console for uncontrolled inputs.

Clear your saved form data in Chrome settings (under advanced tab)

add this to your Formik fields autoComplete="off" and add value="" to the field, but this should e from your formik initial values so it should look like this value={values.password}

<Field
    name="password"
    type="password"
    {...autoCompleteCustom}
    ponent={() =>
        <input
            className={
                "form-control" +
                (errors.password && touched.password
                    ? " is-invalid"
                    : "")
            }
            type="password"
            autoComplete="new-password"
        />
    }
/>