[Feature Request] 'asyncSubmit' prop for the Field component

This was originally proposed by @peteruithoven as a comment here and here, but at the time, @KaboomFox’s solution (thank you for that!) was more immediate and solved the immediate problem mentioned in #980.

Having used that solution in my code, it feels more like a temporary solution but not ‘the’ solution. Through that PR, we get the fieldName that triggered the asyncValidate function. That works well where all the form input is always being submitted together to validate or submit (even in this case, there is boilerplating around not duplicating errors).

However, lets take a simple case, a form with many fields, where each value can or needs to be validated or saved separately onBlur (for performance and UX reasons) to the backend for validation or saving. In that case, the current solution can work but with a lot more boilerplate around checking state of requests, for spinners, or not duplicating requests etc.

In addition, by having it as a prop to the Field component, I am hoping we can also leverage the meta or other props to the field in this function. Currently, all that state needs to be held in parent or decorated component and doesn’t feel like a clean solution.

Alternatively, auto-saving forms can use onBlur prop on fields or be a collection of little forms.

Thoughts? @erikras @KaboomFox @peteruithoven

[erikras]

Hmm…

Many Little Forms

Depending on how cohesive the form data is, how much it needs to be treated as a group of values, it would be pretty easy to make a little form for each field. A settings screen full of toggles is a great example of this. But for a single checkbox, it’s questionable if it’s worth using a whole form library just to keep track of two literal bits (checked and submitting) of information.

Hijacking asyncValidate

You could also (mis-)use asyncValidate to send the values to the server and save them, but this will break the meaning of dirty/pristine.

Submit on onBlur

Your field renderer could submit the whole form whenever any of your fields lose focus, but this has consequences if the other fields you haven’t touched have submit errors, it’s going to mark them all as touched and display the errors.

Proposal

I’m just spitballing here… What if Field had a submitOnBlur boolean prop that, when set, would submit the form (all the values), but would not mark all the other fields as touched. The Field component would be given a meta.submittingField or meta.blurSubmitting flag (to display a spinner) that would be true for the life of the submit promise. Any errors coming back from the server would only set the submitError for that field.

Does that sound more like “the” solution?

[oyeanuj]

@gustavohenke While I understand that this issue has been inactive, it has been waiting for a response from @erikras and other maintainers.

This is still an unresolved issue, IMO, and should be reopened. I think we should propose the solution if building auto-saving forms. Ideally, one of the ones that @erikras recommended above.