Merge pull request #169 from CommerceBear/bugfix/remix_branch/fix-json-issubmitting

Fix isSubmitting formState when encType is application/json for Remix.run

Author: AlemTuzlak

package-lock.json

@@ -16,9 +16,10 @@ const fetcherSubmitMock = vi.fn();
 const useActionDataMock = vi.hoisted(() => vi.fn());
 
 const useNavigationMock = vi.hoisted(() =>
-  vi.fn<() => Pick<Navigation, "state" | "formData">>(() => ({
+  vi.fn<() => Pick<Navigation, "state" | "formData" | "json">>(() => ({
     state: "idle",
     formData: undefined,
+    json: undefined,
   })),
 );
 
@@ -249,12 +250,70 @@ describe("useRemixForm", () => {
     useNavigationMock.mockReturnValue({
       state: "submitting",
       formData: new FormData(),
+      json: undefined,
     });
     rerender();
 
     expect(result.current.formState.isSubmitting).toBe(true);
 
-    useNavigationMock.mockReturnValue({ state: "idle", formData: undefined });
+    useNavigationMock.mockReturnValue({
+      state: "idle",
+      formData: undefined,
+      json: undefined,
+    });
+    rerender();
+
+    expect(result.current.formState.isSubmitting).toBe(false);
+  });
+
+  it("should reset isSubmitting when the form is submitted using encType: application/json", async () => {
+    submitMock.mockReset();
+    useNavigationMock.mockClear();
+
+    const { result, rerender } = renderHook(() =>
+      useRemixForm({
+        resolver: () => ({ values: {}, errors: {} }),
+        submitConfig: {
+          action: "/submit",
+          encType: "application/json",
+        },
+      }),
+    );
+
+    expect(result.current.formState.isSubmitting).toBe(false);
+
+    act(() => {
+      result.current.handleSubmit({} as any);
+    });
+    expect(result.current.formState.isSubmitting).toBe(true);
+
+    await waitFor(() => expect(submitMock).toHaveBeenCalledTimes(1));
+
+    expect(result.current.formState.isSubmitting).toBe(true);
+
+    expect(submitMock).toHaveBeenCalledWith(
+      {},
+      {
+        method: "post",
+        action: "/submit",
+        encType: "application/json",
+      },
+    );
+
+    useNavigationMock.mockReturnValue({
+      state: "submitting",
+      formData: undefined,
+      json: {},
+    });
+    rerender();
+
+    expect(result.current.formState.isSubmitting).toBe(true);
+
+    useNavigationMock.mockReturnValue({
+      state: "idle",
+      formData: undefined,
+      json: undefined,
+    });
     rerender();
 
     expect(result.current.formState.isSubmitting).toBe(false);

src/hook/index.test.tsx

@@ -67,14 +67,24 @@ export const useRemixForm = <T extends FieldValues>({
   const methods = useForm<T>({ ...formProps, errors: data?.errors });
   const navigation = useNavigation();
   // Either it's submitted to an action or submitted to a fetcher (or neither)
-  const isSubmittingForm = useMemo(
-    () =>
-      Boolean(
-        (navigation.state !== "idle" && navigation.formData !== undefined) ||
-          (fetcher?.state !== "idle" && fetcher?.formData !== undefined),
-      ),
-    [navigation.state, navigation.formData, fetcher?.state, fetcher?.formData],
-  );
+  const isSubmittingForm = useMemo(() => {
+    const navigationIsSubmitting =
+      navigation.state !== "idle" &&
+      (navigation.formData ?? navigation.json) !== undefined;
+
+    const fetcherIsSubmitting =
+      fetcher?.state !== "idle" &&
+      (fetcher?.formData ?? fetcher?.json) !== undefined;
+
+    return navigationIsSubmitting || fetcherIsSubmitting;
+  }, [
+    navigation.state,
+    navigation.formData,
+    navigation.json,
+    fetcher?.state,
+    fetcher?.formData,
+    fetcher?.json,
+  ]);
 
   // A state to keep track whether we're actually submitting the form through the network
   const [isSubmittingNetwork, setIsSubmittingNetwork] = useState(false);