When is Formik's "isSubmitting" set back to False?

Question

I have a simple Formik form where the Submit method simply outputs to the console. The structure is

// Submit Form: Custom method referenced in Formik
const submitForm = async (formValues) => {
    console.log(JSON.stringify(formValues));
};

<Formik 
    enableReinitialize
    validationSchema={schema}
    onSubmit={ (values) => {
        submitForm(values); // call my custom Submit method above
    }}
    initialValues={initialFormValues}
>
    {
        ({handleSubmit, handleChange, values, touched, errors, isSubmitting}) 
        => (
            <Form onSubmit={handleSubmit}> {/* Form starts here */}
                ...
                <Button type="submit" disabled={isSubmitting}>Search</Button>
            </Form>
       )
     }
   </Formik>

If there are validation errors, the Submit button correctly ends up enabled after clicking. But if there are no validation errors, I output to the console, and Submit stays disabled even though I'm done. At what point is isSubmitting set back to FALSE in this example?

Answer 1

Not at all. Formik doesn't know when your submit is done, so you need to do it yourself. Formik actually passes the setter into your submit handler for exactly that reason.

Change your code to this:

onSubmit={(values, { setSubmitting }) => {
    submitForm(values, setSubmitting);
}}

and then in your submitForm method, call setSubmitting(false) when done, e.g. in a finally block.