fix(Form): set isSubmitting before start of the validation (#203)

Author: tenphi

.changeset/cuddly-horses-return.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+On form submission the `isSubmitting` flag now set to true before the start of the validation.

src/components/forms/Form/ComplexForm.stories.tsx

@@ -19,13 +19,55 @@ import {
 import { NumberInput } from '../NumberInput/NumberInput';
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Button } from '../../actions';
+import { timeout } from '../../../utils/promise';
 
 export default {
   title: 'Forms/ComplexForm',
   component: Form,
   parameters: { controls: { exclude: baseProps } },
 };
 
+const AsyncValidationTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      {...args}
+      onSubmit={(v) => {
+        console.log('onSubmit:', v);
+      }}
+      onValuesChange={(v) => {
+        console.log('onChange', v);
+      }}
+    >
+      <Field
+        name="text"
+        label="Text input"
+        validateTrigger="onSubmit"
+        rules={[
+          () => ({
+            async validator(rule, value) {
+              await timeout(1000);
+
+              return value?.length >= 8
+                ? Promise.resolve()
+                : Promise.reject(
+                    <>
+                      This field should be <b>at least 8 symbols</b> long
+                    </>,
+                  );
+            },
+          }),
+        ]}
+      >
+        <TextInput />
+      </Field>
+      <Submit>Submit</Submit>
+    </Form>
+  );
+};
+
 const ComplexErrorTemplate: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
 
@@ -224,4 +266,6 @@ export const FormInsideDialog: StoryFn = () => {
 
 export const Default = Template.bind({});
 
-export const ComplexErrorMessage: StoryFn = ComplexErrorTemplate.bind({});
+export const ComplexErrorMessage = ComplexErrorTemplate.bind({});
+
+export const AsyncValidation = AsyncValidationTemplate.bind({});

src/components/forms/Form/Form.tsx

@@ -110,7 +110,7 @@ function Form<T extends FieldTypes>(
   let onSubmitCallback;
 
   if ((onSubmit || onSubmitFailed) && !otherProps.action) {
-    onSubmitCallback = (e) => {
+    onSubmitCallback = async (e) => {
       if (e && e?.preventDefault) {
         e && e?.preventDefault && e?.preventDefault();
         e && e?.stopPropagation && e?.stopPropagation();
@@ -127,29 +127,25 @@ function Form<T extends FieldTypes>(
         }
       }
 
-      return form?.validateFields().then(
-        async () => {
-          await timeout();
-
-          if (form && !form.isSubmitting) {
-            try {
-              form.setSubmitting(true);
-              await onSubmit?.(form.getFormData());
-            } finally {
-              form.setSubmitting(false);
-            }
-          }
-        },
-        async (e) => {
-          await timeout();
-          if (e instanceof Error) {
-            throw e;
-          }
-          // errors are shown
-          // transfer errors to the callback
-          onSubmitFailed?.(e);
-        },
-      );
+      if (!form || form.isSubmitting) return;
+
+      form.setSubmitting(true);
+
+      try {
+        await form.validateFields();
+        await timeout();
+        await onSubmit?.(form.getFormData());
+      } catch (e) {
+        await timeout();
+        if (e instanceof Error) {
+          throw e;
+        }
+        // errors are shown
+        // transfer errors to the callback
+        onSubmitFailed?.(e);
+      } finally {
+        form?.setSubmitting(false);
+      }
 
       // output data from form directly
       // onSubmit(Object.fromEntries(new FormData(e.target).entries()));