Formik clear form on button reset

Question

I have the following form code, the reset button only clears any additional text added to the already existing default values:

const initialValues = {
  firstName,
  lastName,
  email: customerEmail,
  title: customerTitle,
  dob,
}

return (
  <Formik
    initialValues={initialValues}
    onSubmit={data => handleOnSubmit(data)}
  >
    {formik => (
      <Form className="w-full md:w-4/5 lg:w-3/5 mx-auto">
        <ThreeColumnFormFieldset>
          <Field
            id="title"
            name="title"
            label="Title"
            component={Input}
            validate={validateRequired}
          />

          ...
          <ButtonsWrapper>
            <Button
              disabled={!(formik.isValid && formik.dirty)}
              type="Submit"
              isPrimary
              text="update"
            />

            <Button
              onClick={() => formik.resetForm()}
              type="reset"
              text="clear all"
            />
          </ButtonsWrapper>
          ...

this should clear the form input values.

Answer 1

I think resetting to default values is the expected behaviour.

You can get all the fields to empty by passing an argument to resetForm()

<Button
    onClick={() => formik.resetForm({
      values: {
       title: '',
      },
     type="reset"
     text="clear all"
/>

Check the docs here