Merge pull request #68 from watershed-climate/sterling-02-22-pass_pro…

…mise_to_handleSubmit_to_fix_submit_state_tracking

pass promise to handleSubmit to fix submit state tracking

src/__tests__/createSchemaForm.test.tsx

@@ -1,11 +1,12 @@
 import React, { ReactNode, useState } from "react";
 import { z } from "zod";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import {
   customFieldTestId,
   TestCustomFieldSchema,
   TestForm,
+  TestFormWithSubmit,
   textFieldTestId,
 } from "./utils/testForm";
 import {
@@ -591,6 +592,45 @@ describe("createSchemaForm", () => {
 
     expect(screen.getByDisplayValue(val)).toBeInTheDocument();
   });
+  it("should track submitting properly", async () => {
+    const testId = "id";
+    const val = "true";
+    let submitPromiseResolve : () => void = () => {};
+    const submitPromise = new Promise<void>((resolve) => {
+      submitPromiseResolve = resolve;
+    })
+    let submitting =false;
+    function Component() {
+      const form = useForm({
+        defaultValues: {
+          v: val,
+        },
+      });
+      submitting = form.formState.isSubmitting;
+      return (
+        <TestFormWithSubmit
+          form={form}
+          schema={z.object({
+            v: z.string(),
+          })}
+          onSubmit={() => {return submitPromise}}
+          props={{
+            v: {
+              testId: testId,
+            },
+          }}
+        />
+      );
+    }
+
+    render(<Component />);
+    const button = screen.getByText("submit");
+    await userEvent.click(button);
+    expect(submitting).toBe(true);
+    submitPromiseResolve();
+    waitFor(() => expect(submitting).toBe(false));
+  });
+
   it("should throw an error if useTsController is called outside of a @ts-react/form rendered component", () => {
     // hello 100% test coverage =D
     jest.spyOn(console, "error").mockImplementation(() => {});

src/__tests__/utils/testForm.tsx

@@ -96,3 +96,9 @@ const propsMap = [
 export const TestForm = createTsForm(mapping, {
   propsMap: propsMap,
 });
+
+const FormWithSubmit = ({children,...props} : {children : JSX.Element[],   onSubmit: () => void;}) => <form {...props}>{children} <button type="submit">submit</button></form>;
+export const TestFormWithSubmit = createTsForm(mapping, {
+  propsMap: propsMap,
+  FormComponent: FormWithSubmit
+});

src/createSchemaForm.tsx

@@ -247,7 +247,7 @@ export function createTsForm<
     /**
      * A callback function that will be called with the data once the form has been submitted and validated successfully.
      */
-    onSubmit: (values: z.infer<SchemaType>) => void;
+    onSubmit: (values: z.infer<SchemaType>) => void | Promise<void>;
     /**
      * Initializes your form with default values. Is a deep partial, so all properties and nested properties are optional.
      */
@@ -382,10 +382,10 @@ export function createTsForm<
     }
 
     function _submit(data: z.infer<SchemaType>) {
-      resolver(removeUndefined(data), {} as any, {} as any).then((e) => {
+      return resolver(removeUndefined(data), {} as any, {} as any).then(async (e) => {
         const errorKeys = Object.keys(e.errors);
         if (!errorKeys.length) {
-          onSubmit(data);
+          await onSubmit(data);
           return;
         }
         for (const key of errorKeys) {