fix(react-hook-form): initialize useFieldArray via reset on first data load (#7401)

Author: Woutuuur

.changeset/curvy-meals-smash.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/react-hook-form": minor
+---
+
+Fix useFieldArray.fields empty on subsequent loads

packages/react-hook-form/src/useForm/index.spec.tsx

@@ -5,7 +5,8 @@ import type { IRefineOptions, HttpError } from "@refinedev/core";
 import * as Core from "@refinedev/core";
 import { MockJSONServer, TestWrapper, act, render, waitFor } from "../../test";
 import { Route, Routes } from "react-router";
-import { Controller } from "react-hook-form";
+import { Controller, useFieldArray } from "react-hook-form";
+import { screen } from "@testing-library/react";
 
 interface IPost {
   title: string;
@@ -329,4 +330,56 @@ describe("useForm hook", () => {
       useFormCoreSpy.mockRestore();
     }
   });
+
+  it("should populate useFieldArray fields that mount after initial query data sync", async () => {
+    const queryData = {
+      data: {
+        data: { id: "1", tags: [{ value: "react" }, { value: "refine" }] },
+      },
+    };
+
+    const useFormCoreSpy = vi.spyOn(Core, "useForm").mockReturnValue({
+      query: queryData,
+      onFinish: vi.fn().mockResolvedValue({}),
+      onFinishAutoSave: vi.fn().mockResolvedValue({}),
+      formLoading: true, // cached data available immediately; formLoading driven by EditPage prop
+    });
+
+    const FieldArrayChild = ({ control }: { control: any }) => {
+      const { fields } = useFieldArray({ control, name: "tags" });
+      return (
+        <ul>
+          {fields.map((field) => (
+            <li key={field.id} data-testid="tag-item" />
+          ))}
+        </ul>
+      );
+    };
+
+    const EditPage = ({ formLoading }: { formLoading: boolean }) => {
+      const { control } = useForm<IPost, HttpError, IPost>({
+        refineCoreProps: { resource: "posts", action: "edit", id: "1" }
+      });
+      if (formLoading) return <p>loading</p>;
+      return <FieldArrayChild control={control} />;
+    };
+
+    try {
+      const page = (formLoading: boolean) => (
+        <Routes>
+          <Route path="/" element={<EditPage formLoading={formLoading} />} />
+        </Routes>
+      );
+
+      const { rerender } = render(page(true), { wrapper: TestWrapper({}) });
+
+      await act(async () => rerender(page(false)));
+
+      await waitFor(() =>
+        expect(screen.getAllByTestId("tag-item")).toHaveLength(2),
+      );
+    } finally {
+      useFormCoreSpy.mockRestore();
+    }
+  });
 });

packages/react-hook-form/src/useForm/index.ts

@@ -129,6 +129,7 @@ export const useForm = <
     watch,
     setValue,
     getValues,
+    reset,
     handleSubmit: handleSubmitReactHookForm,
     setError,
     formState: { dirtyFields },
@@ -140,6 +141,8 @@ export const useForm = <
   const syncedFieldsRef = React.useRef<Set<string>>(new Set());
   // Track mounted field names so late-registered fields can be detected.
   const mountedFieldsRef = React.useRef<Set<string>>(new Set());
+  // Track whether we have called reset() on initial load, future loads use applyValuesToFields instead to prevent wiping metadata.
+  const hasResetRef = React.useRef(false);
 
   const useFormCoreResult = useFormCore<
     TQueryFnData,
@@ -268,7 +271,15 @@ export const useForm = <
     const applyQueryValues = () => {
       if (!isActive) return;
 
-      applyValuesToFields(getRegisteredFields(), data, false);
+      if (!hasResetRef.current) {
+        hasResetRef.current = true;
+        reset(
+          { ...getValues(), ...data } as unknown as TVariables,
+          { keepDirtyValues: true },
+        );
+      } else {
+        applyValuesToFields(getRegisteredFields(), data, false);
+      }
     };
 
     queryDataRef.current = data;