fix: re-implement repopulateFields support

Author: airjp73

apps/test-app/app/routes/context-hooks.tsx

@@ -66,11 +66,13 @@ const DisplayContext = ({
 export default function FrontendValidation() {
   const actionData = useActionData<typeof action>();
 
-  const server = useServerValidationErrors("test-form");
+  const server = useServerValidationErrors({
+    formId: "test-form",
+    defaultValues: { firstName: "defaultFirstName" },
+  });
   // Verify we don't get an infinite loop
   const form = useForm({
     ...server.getFormOpts(),
-    defaultValues: { firstName: "defaultFirstName" },
     validator: withYup(
       yup.object({
         firstName: yup.string().label("First Name").required(),

apps/test-app/app/routes/custom-server-validation-disable-focus-invalid-field.tsx

@@ -27,7 +27,10 @@ export const action = async (args: DataFunctionArgs) => {
 };
 
 export default function CustomServerValidationDisableFocusInvalidField() {
-  const response = useServerValidationErrors("test-form");
+  const response = useServerValidationErrors({
+    formId: "test-form",
+    defaultValues: {},
+  });
   return (
     <ValidatedForm
       validator={validator}

apps/test-app/app/routes/custom-server-validation-focus-invalid-field.tsx

@@ -27,7 +27,10 @@ export const action = async (args: DataFunctionArgs) => {
 };
 
 export default function CustomServerValidationFocusInvalidField() {
-  const response = useServerValidationErrors("test-form");
+  const response = useServerValidationErrors({
+    formId: "test-form",
+    defaultValues: {},
+  });
   return (
     <ValidatedForm
       validator={validator}

apps/test-app/app/routes/custom-server-validation.tsx

@@ -25,7 +25,10 @@ export const action = async (args: DataFunctionArgs) => {
 };
 
 export default function CustomServerValidation() {
-  const response = useServerValidationErrors("test-form");
+  const response = useServerValidationErrors({
+    formId: "test-form",
+    defaultValues: {},
+  });
   const form = useForm({
     ...response.getFormOpts(),
     validator,

apps/test-app/app/routes/form-id.tsx

@@ -14,7 +14,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 export default function FormId() {
   const actionData = useActionData<typeof action>();
-  const server = useServerValidationErrors("form-id-test-form");
+  const server = useServerValidationErrors({
+    formId: "form-id-test-form",
+    defaultValues: {},
+  });
   return (
     <ValidatedForm
       validator={validator}

apps/test-app/app/routes/submission.aftersubmit._index.tsx

@@ -35,8 +35,14 @@ export const action = async ({ request }: DataFunctionArgs) => {
 
 export default function FrontendValidation() {
   const inputRef = useRef<HTMLInputElement>(null);
-  const errors = useServerValidationErrors("aftersubmit-form");
-  const errors2 = useServerValidationErrors("other-aftersubmit-form");
+  const errors = useServerValidationErrors({
+    formId: "aftersubmit-form",
+    defaultValues: {},
+  });
+  const errors2 = useServerValidationErrors({
+    formId: "other-aftersubmit-form",
+    defaultValues: {},
+  });
   return (
     <>
       <ValidatedForm

apps/test-app/app/routes/validation.tsx

@@ -63,7 +63,10 @@ export const action = async ({ request }: DataFunctionArgs) => {
 
 export default function FrontendValidation() {
   const actionData = useActionData<typeof action>();
-  const response = useServerValidationErrors("test-form");
+  const response = useServerValidationErrors({
+    formId: "test-form",
+    defaultValues: { firstName: "" },
+  });
   const form = useForm({
     validator,
     method: "post",

packages/remix/src/auto-server-hooks.tsx

@@ -1,5 +1,9 @@
 import { FetcherWithComponents, useActionData } from "@remix-run/react";
-import { ValidationErrorResponseData, FORM_ID_FIELD_NAME } from "@rvf/core";
+import {
+  ValidationErrorResponseData,
+  FORM_ID_FIELD_NAME,
+  FieldValues,
+} from "@rvf/core";
 
 type ErrorResponseContext = {
   fetcher?: FetcherWithComponents<unknown>;
@@ -21,23 +25,32 @@ function useErrorResponseForForm({
   return actionData.formId === formId ? actionData : null;
 }
 
-export const useServerValidationErrors = (
-  formIdOrFetcher: string | FetcherWithComponents<any>,
+export type ServerValidationErrorOpts<DefaultValues> = (
+  | { formId: string }
+  | { fetcher: FetcherWithComponents<unknown> }
+) & {
+  defaultValues: DefaultValues;
+};
+
+export const useServerValidationErrors = <DefaultValues extends FieldValues>(
+  opts: ServerValidationErrorOpts<DefaultValues>,
 ) => {
-  const formId =
-    typeof formIdOrFetcher === "string" ? formIdOrFetcher : undefined;
-  const fetcher =
-    typeof formIdOrFetcher === "string" ? undefined : formIdOrFetcher;
+  const { defaultValues } = opts;
+  const formId = "formId" in opts ? opts.formId : undefined;
+  const fetcher = "fetcher" in opts ? opts.fetcher : undefined;
+
   const errorsFromServer = useErrorResponseForForm({
     fetcher,
     formId,
   });
+  const errorDefaultValues = errorsFromServer?.repopulateFields;
 
   return {
     getFormOpts: () => ({
       serverValidationErrors: errorsFromServer?.fieldErrors,
       id: formId,
       fetcher,
+      defaultValues: (errorDefaultValues ?? defaultValues) as DefaultValues,
     }),
     renderHiddenInput: () => (
       <input type="hidden" name={FORM_ID_FIELD_NAME} value={formId} />

packages/remix/src/test/submission.test.tsx

@@ -484,10 +484,12 @@ it("should call onSubmitFailure if the call returns a validation error", async (
     {
       path: "/",
       Component: () => {
-        const response = useServerValidationErrors("testing");
+        const response = useServerValidationErrors({
+          formId: "testing",
+          defaultValues: { foo: "" },
+        });
         const form = useForm({
           ...response.getFormOpts(),
-          defaultValues: { foo: "" },
           validator,
           method: "post",
           onSubmitSuccess: success,