react-component / react-component/field-form

Any reason why `validateFields` is async, but `submit` and `onFinish` are not async?

Open
#319 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1k
Forks
286
Avg merge
4d 16h
Merged PRs (30d)
1

Description

That inconsistency brings some level of headache dealing with forms linked via Form.Provider. E.g. we need to call validation for all forms and at the end get values, but calling something to finalize these values before (onFinish and submit are good candidates, but they don't return any values and not async as well).

const onFormFinish = async (name, { forms }) => {
   if(name) {
      return;
   }

   try {
      // e.g. we could use async `submit` + `onFinish` or `submit` + validation rule for `onSubmit` for that
      const values = await Promise.all(Object.values(forms).map(f.submit));
      const payload = values.reduce((result, next) => ({ ...result, ...next }), {});

      // save payload combined from all sub-forms and extra transformations from onFinish when required
      const response = await onSave(payload);
   } catch (e) {
      console.log(e)
   }
}

const onInfoFinish = async(values) => {
   // do something not related to form/fields directly, 
   // e.g. some extra backend requests that we cant do during validation, but should be present in final payload
   const uuid = await getUUID(values);

   // values transformed after that extra requests - e.g. attached some UUIDS
   return {...rawValues, uuid }; 
}

<Form.Provider onFormFinish={onFormFinish}>
   <Form name="info" onFinish=(onInfoFinish}>
     // sub-form with extra processing for values after successful validations
   <Form>

   <Form name="details">
     // sub-form without any extra processing
   <Form>

   <Form>
     // sub-form that triggers saving process
     <Button htmlType="submit">Save</Button>
   <Form>

</Form.Provider>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the Form.Provider flow and the validateFields, submit, and onFinish entry points described in the issue. Compare their current asynchronous behavior and define how submitted or transformed values should propagate across linked forms; done means the proposed contract supports the combined payload workflow without ambiguity.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.