question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v2] isSubmitting resets to false too early.

See original GitHub issue

🐛 Bug report

Current Behavior

In 2.0.1-rc12, when submitting the form, isSubmitting is set to true but is instantly reset to false, making it hard to disable input fields and buttons.

Expected behavior

I would expect isSubmitting to be true until it’s set to false in the onSubmit function.

Reproducible example

Codesandbox example. (Sandbox was deleted at some point, sorry)

Your environment

Software Version(s)
Formik 2.0.1-rc12
React 16.8.6
Browser Google Chrome Version 76.0.3809.87 (64-bit)
npm/Yarn 1.17.3
Operating System macOS 10.14.5

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:39
  • Comments:31 (7 by maintainers)

github_iconTop GitHub Comments

11reactions
omarshammascommented, Nov 1, 2019

Returning the promise solved my issue in case anyone else faces this issue.

10reactions
alexborisovcommented, Oct 26, 2019

any updates on this issue? I’m having the same problem and it’s causing issues disabling the submit button for me - breaking functionality. Setting enableReinitialize to false as suggested by @mhienle did not help 😦

UPDATE: It seems that if I use async/await this works correctly

<Formik
    initialValues={{ email: '' }}
    enableReinitialize={true}
    validationSchema={Yup.object({
      email: Yup.string()
        .email('Invalid email addresss`')
        .required('Required'),
    })}
    onSubmit={async(values, { setSubmitting }) => {
      console.log('submit')
      await callApi()
    }}
  >
    <Form>
      <Field type="email" name="email" />
      <ErrorMessage name="email" component="div" />
      <SubmitButton />
    </Form>
  </Formik>

note i don’t use setSubmitting anywhere - it just seems to do it’s thing all on it’s own :S

Read more comments on GitHub >

github_iconTop Results From Across the Web

When is Formik's "isSubmitting" set back to False?
Adding to digitalbreeds answer, actually Formik does reset isSubmitting to false , when your onSubmit handler returns a Promise.
Read more >
Form Submission | Formik
Yes: Abort submission. Set isValidating to false , set errors , set isSubmitting to false · No: Set isValidating to false , proceed...
Read more >
Handling Forms - VeeValidate
vee-validate offers many helpers to handle form submissions, resets, ... will wait if the result is asynchronous), then it will set isSubmitting to...
Read more >
React-admin V4: Build Your Own Framework - Marmelab
Edition views are very common in single-page apps. ... data }) => { // initialize form with the result reset(data) setIsLoading(false); } ...
Read more >
How to manage state in a React app with just Context and ...
So for this article, we will be working with a pattern for ... isSubmitting: false, errorMessage: null }; const [data, setData] = React....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found