Merge pull request #186 from code-forge-io/feat/issue-sweep

feat: defaultSubmitHandler, submitRawValues, resetOnSuccess and 5 issue fixes

Author: AlemTuzlak

.changeset/issue-sweep-minor.md

@@ -0,0 +1,13 @@
+---
+"remix-hook-form": minor
+---
+
+New options and fixes for `useRemixForm`:
+
+- New `defaultSubmitHandler` on the hook return. It is the handler that `useRemixForm` uses when `submitHandlers.onValid` is not set. Call it in a custom `onValid` to submit to the action in the default way. The form action, method and encType still apply (#148).
+- New `submitRawValues` option. When it is `true`, the default submit handler sends `getValues()` and not the resolver output, so transforms (for example a zod `.transform()`) do not run on the client and again on the server (#172).
+- New `resetOnSuccess` option. When it is `true`, the form is reset after a submission if the action returns no `errors` (#157).
+- The return types of `useRemixForm` and `useRemixFormContext` now come from `UseFormReturn`. Members that new react-hook-form versions add (for example `getErrors` and `resetDefaultValues`) are typed, and `<RemixFormProvider {...form}>` compiles again with react-hook-form 7.82 and later (#185). `UseRemixFormReturn["handleSubmit"]` now has only the event signature that the hook uses.
+- A form with an input named `action`, `method` or `enctype` now submits correctly (#139).
+- A router `basename` with a trailing slash (`/app/`) no longer makes the form action a relative path (#175).
+- An array or `FileList` with one file now parses back as an array on the server (#178).

src/hook/index.test.tsx

@@ -7,6 +7,7 @@ import {
   waitFor,
 } from "@testing-library/react";
 import React from "react";
+import type { Control, UseFormReturn } from "react-hook-form";
 import { type Navigation, useFetcher } from "react-router";
 import { RemixFormProvider, useRemixForm, useRemixFormContext } from "./index";
 
@@ -23,7 +24,9 @@ const useNavigationMock = vi.hoisted(() =>
   })),
 );
 
-const useHrefMock = vi.hoisted(() => vi.fn());
+const useHrefMock = vi.hoisted(() =>
+  vi.fn<(to: string) => string | undefined>(() => "/"),
+);
 
 vi.mock("react-router", () => ({
   useSubmit: () => submitMock,
@@ -451,6 +454,243 @@ describe("useRemixForm", () => {
     expect(booleanFieldProps.defaultChecked).toBe(false);
     expect(booleanFieldProps.defaultValue).toBe(undefined);
   });
+
+  it("types the return value with every react-hook-form member (#185, #116)", () => {
+    type Values = { name: string };
+    const { result } = renderHook(() => useRemixForm<Values>({}));
+    // Fails to compile when the return type misses a member of UseFormReturn
+    const members: Omit<
+      UseFormReturn<Values>,
+      "handleSubmit" | "reset" | "register"
+    > = result.current;
+    const control: Control<Values> = result.current.control;
+    expect(members.getValues).toBeInstanceOf(Function);
+    expect(control).toBe(result.current.control);
+  });
+
+  it("keeps the leading slash of the action when the basename ends with a slash (#175)", async () => {
+    submitMock.mockReset();
+    useActionDataMock.mockReturnValue(undefined);
+    useHrefMock.mockImplementation(() => "/my-basename/");
+    vi.spyOn(window, "location", "get").mockReturnValueOnce({
+      origin: "http://example.com",
+      // biome-ignore lint/suspicious/noExplicitAny: partial location mock
+    } as any);
+
+    const { result } = renderHook(() =>
+      useRemixForm({
+        resolver: () => ({ values: {}, errors: {} }),
+      }),
+    );
+
+    act(() => {
+      result.current.handleSubmit({
+        currentTarget: {
+          action: "http://example.com/my-basename/basename-test-submit",
+        },
+        // biome-ignore lint/suspicious/noExplicitAny: partial event mock
+      } as any);
+    });
+    await waitFor(() => {
+      expect(submitMock).toHaveBeenCalledWith(expect.any(FormData), {
+        method: "post",
+        action: "/basename-test-submit",
+      });
+    });
+    useHrefMock.mockImplementation(() => "/");
+  });
+
+  it("submits when the form has inputs named action, method or enctype (#139)", async () => {
+    submitMock.mockReset();
+    useActionDataMock.mockReturnValue(undefined);
+    const form = document.createElement("form");
+    // In a browser, an input replaces the form property with the same name
+    for (const name of ["action", "method", "enctype"]) {
+      const input = document.createElement("input");
+      input.name = name;
+      form.appendChild(input);
+      Object.defineProperty(form, name, { value: input });
+    }
+    // The HTMLFormElement getters still return the real values
+    const getters = [
+      vi
+        .spyOn(HTMLFormElement.prototype, "action", "get")
+        .mockReturnValue(`${window.location.origin}/submit`),
+      vi
+        .spyOn(HTMLFormElement.prototype, "method", "get")
+        .mockReturnValue("post"),
+      vi
+        .spyOn(HTMLFormElement.prototype, "enctype", "get")
+        .mockReturnValue("multipart/form-data"),
+    ];
+
+    const { result } = renderHook(() =>
+      useRemixForm({
+        resolver: () => ({ values: {}, errors: {} }),
+      }),
+    );
+
+    act(() => {
+      // biome-ignore lint/suspicious/noExplicitAny: partial event mock
+      result.current.handleSubmit({ currentTarget: form } as any);
+    });
+    await waitFor(() => {
+      expect(submitMock).toHaveBeenCalledWith(expect.any(FormData), {
+        method: "post",
+        action: "/submit",
+        encType: "multipart/form-data",
+      });
+    });
+    for (const getter of getters) getter.mockRestore();
+  });
+
+  it("lets clearErrors remove errors returned by the server (#12)", async () => {
+    const serverData = {
+      errors: {
+        root: { message: "Server error" },
+        name: { message: "Name is taken" },
+      },
+    };
+    useActionDataMock.mockReturnValue(serverData);
+
+    const { result, rerender } = renderHook(() =>
+      useRemixForm<{ name: string }>({ defaultValues: { name: "" } }),
+    );
+    await waitFor(() => {
+      expect(result.current.formState.errors.root?.message).toBe(
+        "Server error",
+      );
+    });
+
+    act(() => {
+      result.current.clearErrors("root");
+      result.current.clearErrors("name");
+    });
+    rerender();
+
+    expect(result.current.formState.errors.root).toBeUndefined();
+    expect(result.current.formState.errors.name).toBeUndefined();
+    useActionDataMock.mockReturnValue(undefined);
+  });
+
+  it("exposes the default submit handler so onValid can wrap it (#148)", async () => {
+    submitMock.mockReset();
+    useActionDataMock.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => {
+      const form = useRemixForm<{ name: string; extra?: string }>({
+        resolver: () => ({ values: { name: "John" }, errors: {} }),
+        submitHandlers: {
+          onValid: (data) => {
+            form.defaultSubmitHandler({ ...data, extra: "from onValid" });
+          },
+        },
+      });
+      return form;
+    });
+
+    act(() => {
+      result.current.handleSubmit({
+        currentTarget: {
+          action: `${window.location.origin}/wrapped`,
+          method: "post",
+        },
+        // biome-ignore lint/suspicious/noExplicitAny: partial event mock
+      } as any);
+    });
+    await waitFor(() => expect(submitMock).toHaveBeenCalledTimes(1));
+
+    const [formData, options] = submitMock.mock.calls[0];
+    expect(formData.get("name")).toBe(JSON.stringify("John"));
+    expect(formData.get("extra")).toBe(JSON.stringify("from onValid"));
+    // The form action and method still apply without passing them through
+    expect(options).toEqual({ method: "post", action: "/wrapped" });
+  });
+
+  it("submits the raw field values when submitRawValues is true (#172)", async () => {
+    submitMock.mockReset();
+    useActionDataMock.mockReturnValue(undefined);
+
+    const { result } = renderHook(() =>
+      // biome-ignore lint/suspicious/noExplicitAny: default context type
+      useRemixForm<{ date: string }, any, { date: Date }>({
+        defaultValues: { date: "2025-01-01" },
+        resolver: (values) => ({
+          values: { date: new Date(values.date) },
+          errors: {},
+        }),
+        submitRawValues: true,
+      }),
+    );
+
+    act(() => {
+      // biome-ignore lint/suspicious/noExplicitAny: partial event mock
+      result.current.handleSubmit({} as any);
+    });
+    await waitFor(() => expect(submitMock).toHaveBeenCalledTimes(1));
+
+    expect(submitMock.mock.calls[0][0].get("date")).toBe(
+      JSON.stringify("2025-01-01"),
+    );
+  });
+
+  describe("resetOnSuccess (#157)", () => {
+    const submitAndFinish = async (actionData: unknown) => {
+      submitMock.mockReset();
+      useActionDataMock.mockReturnValue(undefined);
+      useNavigationMock.mockReturnValue({
+        state: "idle",
+        formData: undefined,
+        json: undefined,
+      });
+
+      const hook = renderHook(() =>
+        useRemixForm<{ name: string }>({
+          defaultValues: { name: "default" },
+          resolver: (values) => ({ values, errors: {} }),
+          resetOnSuccess: true,
+        }),
+      );
+      act(() => hook.result.current.setValue("name", "changed"));
+      act(() => {
+        // biome-ignore lint/suspicious/noExplicitAny: partial event mock
+        hook.result.current.handleSubmit({} as any);
+      });
+      await waitFor(() => expect(submitMock).toHaveBeenCalledTimes(1));
+
+      useNavigationMock.mockReturnValue({
+        state: "submitting",
+        formData: new FormData(),
+        json: undefined,
+      });
+      hook.rerender();
+      expect(hook.result.current.getValues("name")).toBe("changed");
+
+      useActionDataMock.mockReturnValue(actionData);
+      useNavigationMock.mockReturnValue({
+        state: "idle",
+        formData: undefined,
+        json: undefined,
+      });
+      hook.rerender();
+      await act(async () => {});
+      return hook;
+    };
+
+    it("resets the form when the action returns no errors", async () => {
+      const { result } = await submitAndFinish({ ok: true });
+      expect(result.current.getValues("name")).toBe("default");
+      useActionDataMock.mockReturnValue(undefined);
+    });
+
+    it("keeps the values when the action returns errors", async () => {
+      const { result } = await submitAndFinish({
+        errors: { name: { message: "Name is taken" } },
+      });
+      expect(result.current.getValues("name")).toBe("changed");
+      useActionDataMock.mockReturnValue(undefined);
+    });
+  });
 });
 
 afterEach(cleanup);