Page reload after submit

[cinaaaa]

🐛 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

[animeshsinghweb]

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>

[dannypule]

You can also pass handleSubmit directly to your HTML form tag to allow Formik to handle preventing the default behaviour:

<Formik 
  initialValues={{
    email: 'hello',
    password: 'world'
  }}
  onSubmit={(values) => {
    console.log(values); // -> { email: 'hello', password: 'world' }
  }}
>
  {(form) => <form onSubmit={form.handleSubmit} >
   ...
  </form>}
</Formik>

[s7dhansh]

I have realized that this problem occurs in case of nested forms. If you remove the nesting it should go away.

[arianitu]

@s7dhansh thank you, I removed the nesting and the Enter key now works correctly without refreshing page.

[Koppeks]

I have realized that this problem occurs in case of nested forms. If you remove the nesting it should go away.

What do you mean by "nested forms"? Because i have this exact error but i dont see a form inside a form in my code.

[kempatomas]

I had the same issue because I was (unconsciously) unloading form component when fetch happened and showing loading spinner instead. It was enough to reorganize code not to unload form component and all state persisted with no refresh.