Merge pull request #23 from Code-Forge-Net/22-formstateissubmitting-d…

…oes-not-behave-as-we-could-expect

#22 - Is submitting change

src/hook/index.test.tsx

@@ -16,6 +16,7 @@ vi.mock("@remix-run/react", () => ({
   useSubmit: () => submitMock,
   useActionData: () => ({}),
   useFetcher: () => ({ submit: fetcherSubmitMock, data: {} }),
+  useNavigation: () => ({ state: "idle" }),
 }));
 
 describe("useRemixForm", () => {
@@ -56,7 +57,7 @@ describe("useRemixForm", () => {
           onValid,
           onInvalid,
         },
-      })
+      }),
     );
 
     act(() => {
@@ -74,7 +75,7 @@ describe("useRemixForm", () => {
         submitConfig: {
           action: "/submit",
         },
-      })
+      }),
     );
 
     act(() => {
@@ -99,7 +100,7 @@ describe("useRemixForm", () => {
         submitConfig: {
           action: "/submit",
         },
-      })
+      }),
     );
 
     act(() => {
@@ -124,7 +125,7 @@ describe("RemixFormProvider", () => {
         submitConfig: {
           action: "/submit",
         },
-      })
+      }),
     );
     const spy = vi.spyOn(result.current, "handleSubmit");
 
@@ -136,7 +137,7 @@ describe("RemixFormProvider", () => {
     const { getByTestId } = render(
       <RemixFormProvider {...result.current}>
         <TestComponent />
-      </RemixFormProvider>
+      </RemixFormProvider>,
     );
 
     const form = getByTestId("test") as HTMLFormElement;

src/hook/index.tsx

@@ -4,6 +4,7 @@ import {
   SubmitFunction,
   useActionData,
   useSubmit,
+  useNavigation,
 } from "@remix-run/react";
 import {
   SubmitErrorHandler,
@@ -46,6 +47,10 @@ export const useRemixForm = <T extends FieldValues>({
   const submit = fetcher?.submit ?? actionSubmit;
   const data = fetcher?.data ?? actionData;
   const methods = useForm<T>(formProps);
+  const navigation = useNavigation();
+  // Either it's submitted to an action or submitted to a fetcher (or neither)
+  const isSubmittingForm =
+    navigation.state !== "idle" || (fetcher && fetcher.state !== "idle");
 
   // Submits the data to the server when form is valid
   const onSubmit = (data: T) => {
@@ -96,7 +101,7 @@ export const useRemixForm = <T extends FieldValues>({
       isDirty,
       isSubmitSuccessful,
       isSubmitted,
-      isSubmitting,
+      isSubmitting: isSubmittingForm || isSubmitting,
       isValid,
       isValidating,
       touchedFields,

src/testing-app/app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { json, type ActionArgs } from "@remix-run/node";
+import { useFetcher } from "@remix-run/react";
 import { getValidatedFormData, useRemixForm } from "remix-hook-form";
 import { z } from "zod";
 
@@ -13,7 +14,8 @@ const resolver = zodResolver(schema);
 
 export const action = async ({ request }: ActionArgs) => {
   const { data } = await getValidatedFormData<FormData>(request, resolver);
-
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  return null;
   // Make DB call or similar here.
   //return json({ errors: { content: { message: "error" } } });
   return {
@@ -23,15 +25,17 @@ export const action = async ({ request }: ActionArgs) => {
 };
 
 export default function Index() {
+  const fetcher = useFetcher();
   const { register, handleSubmit, formState } = useRemixForm<FormData>({
     resolver,
+    fetcher,
   });
 
   return (
     <div>
       <p>Add a thing...</p>
       <p>Current Errors: {JSON.stringify(formState.errors)}</p>
-      <form method="post" onSubmit={handleSubmit}>
+      <fetcher.Form method="post" onSubmit={handleSubmit}>
         <div>
           <label>
             Content: <input type="text" {...register("content")} />
@@ -43,7 +47,7 @@ export default function Index() {
             Add
           </button>
         </div>
-      </form>
+      </fetcher.Form>
     </div>
   );
 }