Formik: Page reload after submit

Created on 31 May 2020  路  1Comment  路  Source: formium/formik

馃悰 Bug report

Current Behavior

Form is automaticly refresh and reset + reload page after submit form

Expected behavior

After clicking on submit button of my form the page reloads and reset all things

My code

<Formik

        initialValues = {{
            code: '' 
        }}

        validate={ values => {

            const errors = {};

            if (!values.code) 
            {
                errors.code = 'Empty Field';
            };

            return errors;
        }}

        onSubmit={(values, { setSubmitting }) => 
        {
            dispatch(verifyCode(values.code));
            setSubmitting(false);
        }}
        >
        {({
            values,
            handleChange,
            handleBlur,
            handleSubmit,
        }) => (
        <>
            <Redirector 
                activeOn={status.status === 'VERIFIED'}
                to='../../../'
            />

            <form 
                autoComplete="off"
            >
                <FormInput
                    label='Code We Sent'
                    type='text'
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.code}
                    name='code'
                />

                <StateButton 
                    showLoaderOn={!status.load}
                    text='Verify'
                    display
                    clicked={handleSubmit}
                />

                <Alerts 
                    kind='failure'
                    display={status.status === "CODE_ERROR" && status.load}
                    text={"Wrong Code, Please check the code and re-enter"}
                />

            </form>
        </>
        )}
    </Formik>

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.1.2 |
| React |16.12.0 |
| TypeScript | - |
| Browser |Chrome Windows 10 NT |
| npm/Yarn | 1.22.4 |
| Operating System | Windows |

Most helpful comment

I am facing the same issue. What I had to do to resolve it was, pass the handleSubmit prop to my <Form onSubmit={}> and initiate the event preventDefault().

  const onSubmit = async (values, formikProps) => {
    console.log("onSubmit -> values, formikProps", values, formikProps);

      setTimeout(() => {
        console.log("resolved timeout at onSubmit");
      }, 5000);
  };

<Formik
              initialValues={{ email: "", password: "" }}
              validationSchema={validation}
              onSubmit={onSubmit}>
              {({
                values,
                errors,
                touched,
                handleSubmit,
                handleChange,
                handleBlur,
                isSubmitting,
              }) => (
                <Form
                  // role="form"
                  onSubmit={(e) => {
                    e.preventDefault();
                    handleSubmit();
                  }}> ... </Form>

             )}
</Formik>

>All comments

I am facing the same issue. What I had to do to resolve it was, pass the handleSubmit prop to my <Form onSubmit={}> and initiate the event preventDefault().

  const onSubmit = async (values, formikProps) => {
    console.log("onSubmit -> values, formikProps", values, formikProps);

      setTimeout(() => {
        console.log("resolved timeout at onSubmit");
      }, 5000);
  };

<Formik
              initialValues={{ email: "", password: "" }}
              validationSchema={validation}
              onSubmit={onSubmit}>
              {({
                values,
                errors,
                touched,
                handleSubmit,
                handleChange,
                handleBlur,
                isSubmitting,
              }) => (
                <Form
                  // role="form"
                  onSubmit={(e) => {
                    e.preventDefault();
                    handleSubmit();
                  }}> ... </Form>

             )}
</Formik>

Was this page helpful?
0 / 5 - 0 ratings