Form reset does not reset checkboxes when using enableReinitialize

[romandecker]

🐛 Bug report

Current Behavior

Check this minimal example: https://codesandbox.io/s/formik-checkbox-reset-zyvpd

1. Change textbox and tick checkbox
2. Click "Submit" to update the initial values, the form should now reset to the updated values
3. Click "Reset"

Right now, this will correctly reset the textbox, but not the checkbox!

Expected behavior

The checkbox should also be reset to the updated initial value

Reproducible example

https://codesandbox.io/s/formik-checkbox-reset-zyvpd

Your environment

Software	Version(s)
Formik	1.5.8
React	16.8.6
TypeScript	3.6.3
Browser	Chrome 77.0.3865.75, Firefox 69.0
npm/Yarn	1.12.3
Operating System	macOS Mojave 10.14.6

[maheshsundaram]

I'm having this same issue. @DEX3 had you figured out any way to workaround it?

[romandecker]

Nope, we couldn't make reset to work properly, the issue solved itself for us when we started re-rendering the entire <Formik />-container on reset. The underlying issue still persists however.

[Gibbo3771]

Having some problem. I have a bunch of custom multi-step forms and on the final step of these forms, you are able to submit the form, but at the end you can also submit and reset, going back to step one.

Calling formik.resetForm() passed in via render props never resets checkboxes or radio buttons. Only text feilds.

@DEX3 How are you resetting the form? I don't see anywhere to force a re-render with Formik. Are you just using useEffect?

[maddhruv]

Try the latest formik (>= 2.2.3), fixed with #2874

[SomeFanatic]

Well, easiest workaround is using: document.getElementById("gdprId").checked = false;
I'm using formik 2.2.9 and the issue is still not fixed.

    onSubmit: (values, {resetForm}) => {
        setDisplayMessage("animate");
        values.created_on = new Date().getTime();
        values.created_on_dv = Date();
        postToDb('contact_form', values);

         resetForm({});
         document.getElementById("gdprId").checked = false;

    },

[LotusAndMe]

Get same problem, after reset form with useFormik.formReset() check box do reset in state, but dont re-rendered. Solution is just give property checked to your input:

<input type="checkbox" id="agreement" checked={formik.values.agreement} value={formik.values.agreement} onChange={formik.handleChange} onBlur={formik.handleBlur} />