opened
rhyek
username_0
Related #486. Wanted to get feedback on this. If the work is desired I can add some unit tests.
Async submitForm
issue
created
rhyek
username_0
@username_2 any thoughts on this? I'm using this in a project, currently, and it's working nicely.
comment
created
kevinmook
username_1
For what it's worth, this would be a very helpful change for us!
comment
created
jaredpalmer
username_2
This would be a major breaking change as it is currently implemented. However, this is possible to do. The trick would be to simply check if the function is a promise or not (just like validation) and keep functionality as is, or if it is a promise, call setSubmitting accordingly. They’ll be some gotchas (I think) related to error handling but overall I think this is a good feature.
comment
created
rhyek
username_0
@username_2, thanks. What breaking changes do you expect to stem from this change? This was one of my concerns as well, honestly. Currently all tests are passing and I have a mix of several forms some using this functionality and others not. Everything is working normally in all configurations.
comment
created
rhyek
username_0
Also, I'm sure you know this, but the way I did it, I'm generalizing most of the behavior with `Promise.resolve()` which will work regardless of whether the parameter is a "thenable" or not. For example, `Promise.resolve(2).then(n => // n === 2)`.
comment
created
jaredpalmer
username_2
I missed that you always wrapped in a promise. I need to think about this and try it out on our codebases. On the one hand it makes testing consistent `await submitForm`. However it would also cause an unnecessary render if submit is truly synchronous.
comment
created
mgyarmathy
username_3
@username_2 @username_0 any chance this will be merged anytime soon?
comment
created
slorber
username_4
Hi,

Also need this, because when submitting forms, I use the returned promise to display a spinner inside the submit button.

See https://github.com/username_4/react-nested-loader
comment
created
dclark27
username_5
This would also be a great benefit for my team. We want to be able to do something on valid form submission.
comment
created
tomshane
username_6
I also find this feature very handy and i could use it immediately. Any chances this could be merged any time soon? Thanks.
comment
created
quolpr
username_7
Any updates on that?
comment
created
rhyek
username_0
Closed. Awesome!
comment
created
jaredpalmer
username_2
We are working on it internally.
comment
created
jaredpalmer
username_2
Will have something up this weekend or early next week
comment
created
jaredpalmer
username_2
We can reopen this. Sorry I meant to keep this one open.
comment
created
jaredpalmer
username_2
Was able to reopen. Phew. Sorry about that!
comment
created
Filson14
username_8
Hi @username_2. Is there any chance to include that feature? It would be really helpful. Any news?
comment
created
lashiec9
username_9
Has anyone been able to work around this issue while waiting for the PR to go through?
comment
created
jehartzog
username_10
@username_9 I was able to for our use case, but it was incredibly ugly and I don't recommend anybody use this same method 😆 

Basically we for all the forms we wanted to track to make sure submission was complete, when we created their unique id to an array. We'd then pass down a prop to each form `registerSubmitCompete(id)` that the form would call at the very end of it's `onSubmit` handler.

The parent could then trigger all children forms to submit, and would then poll until all the child forms called their `registerSubmitCompete()`. Here is some of the code:

## In parent
```js
  registerSubmitComplete = id => {
    this.submittingForms = this.submittingForms.filter(form => form.id !== id);
  };

  submitChildForms = async () => {
    // This would work if Formik submitForm returned the promise from the submit handler
    // https://github.com/username_2/formik/pull/500
    // const allSubmitFunctions = this.submitForms.map(form => form.submitForm);
    // // Executes all the submit functions, and returns a promise that resolves once they all resolve
    // await Promise.all(allSubmitFunctions.map(func => func()));

    this.setState({ isSubmitting: true });

    // Instead we just call it sync, and use a callback method to track when complete
    this.submitForms.forEach(form => form.submitForm());

    // Make a copy of all forms that need to be submitted
    this.submittingForms = [...this.submitForms];

    // Wait until the callback comes that each submit is done
    await new Promise(resolve => {
      const timerCheckSubmitted = setInterval(() => {
        if (this.submittingForms.length <= 0) {
          resolve();
          clearInterval(timerCheckSubmitted);
        }
      }, 100);
    });

    this.setState({ isSubmitting: false });
  };
```

Again I wouldn't really recommend anyone use this, but for us we had already built up enough forms assuming we could manage child form submissions that this little hack was quicker than a better refactor.
comment
created
randycoulman
username_11
@username_9 Here's our work-around for `handleSubmit` not being async: https://gist.github.com/username_11/608271914f29f580f07f44d38197742d.  This may not work for everyone, but it seems to do the trick for us. Note that we use higher-order components (including `withFormik`) and [recompose](https://github.com/acdlite/recompose) in our system, so that's what we're using.
comment
created
jaredpalmer
username_2
Async submit has just been shipped in v2 canary. `npm i formik@canary`
comment