fix(client): open the create panel blank after an edit panel loaded a record

A route creates one useForm and hands it to whichever of FormCreatePanel or
FormEditPanel the current mode selects, so the two panels share a form instance.
FormEditPanel loads a record with reset(row), and react-hook-form's reset REPLACES
defaultValues with what it is given. FormCreatePanel then reset()s to those
defaults, which means opening a create panel after an edit panel pre-filled it with
the record that was just edited — including its id.

rememberPristineDefaults records the defaults the route gave its form the first time
either panel sees it. That happens during render, before either panel's reset effect
runs, so whichever panel mounts first captures the route's own defaults rather than
a loaded record. The create panel resets to those.

Deliberately not reset(row, { keepDefaultValues: true }) in the edit panel, which is
the shorter fix: FormSaveDock reads isDirty and dirtyFields, and keeping the blank
defaults would make an edit form read as dirty the moment it loads a record. The
edit panel should own defaultValues; it is the create panel that needs a different
baseline.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: emoss08

client/apps/web/src/components/__tests__/shared-form-panels.test.tsx

@@ -0,0 +1,163 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, waitFor } from "@testing-library/react";
+import { useForm, type UseFormReturn } from "react-hook-form";
+import { FormCreatePanel } from "@/components/form-create-panel";
+import { FormEditPanel } from "@/components/form-edit-panel";
+
+vi.mock("sonner", () => ({ toast: { error: vi.fn(), success: vi.fn() } }));
+
+type ChargeForm = {
+  code: string;
+  description: string;
+  status: string;
+};
+
+const PRISTINE: ChargeForm = { code: "", description: "", status: "Active" };
+const ROW = {
+  id: "acc_1",
+  code: "DET",
+  description: "Detention",
+  status: "Inactive",
+} as const;
+
+// Mirrors the shape every route using these panels has: ONE useForm, handed to whichever
+// panel `mode` selects. See routes/accessorial-charge/_components/accessorial-charge-panel.
+function SharedFormPanels({
+  mode,
+  onForm,
+}: {
+  mode: "create" | "edit";
+  onForm: (form: UseFormReturn<ChargeForm>) => void;
+}) {
+  const form = useForm<ChargeForm>({ defaultValues: PRISTINE });
+  onForm(form);
+
+  if (mode === "edit") {
+    return (
+      <FormEditPanel<ChargeForm, typeof ROW & Record<string, unknown>>
+        open
+        onOpenChange={() => undefined}
+        row={ROW as unknown as typeof ROW & Record<string, unknown>}
+        form={form}
+        url="/accessorial-charges/"
+        queryKey="accessorial-charge-list"
+        title="Accessorial Charge"
+        formComponent={null}
+      />
+    );
+  }
+
+  return (
+    <FormCreatePanel<ChargeForm, typeof ROW>
+      open
+      onOpenChange={() => undefined}
+      form={form}
+      url="/accessorial-charges/"
+      queryKey="accessorial-charge-list"
+      title="Accessorial Charge"
+      formComponent={null}
+    />
+  );
+}
+
+function wrapper(client: QueryClient) {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+}
+
+describe("create and edit panels sharing one form", () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+  });
+
+  afterEach(() => {
+    queryClient.clear();
+    vi.clearAllMocks();
+  });
+
+  // The reported defect: open an edit panel, then open the create panel, and the create
+  // form is pre-filled with the record that was just edited. reset(row) in the edit panel
+  // REPLACES the form's defaultValues, so the create panel's bare reset() restored the
+  // record instead of a blank form.
+  it("opens the create panel blank after the edit panel loaded a record", async () => {
+    let form!: UseFormReturn<ChargeForm>;
+    const capture = (f: UseFormReturn<ChargeForm>) => {
+      form = f;
+    };
+
+    const view = render(<SharedFormPanels mode="edit" onForm={capture} />, {
+      wrapper: wrapper(queryClient),
+    });
+
+    await waitFor(() => expect(form.getValues().code).toBe("DET"));
+
+    view.rerender(<SharedFormPanels mode="create" onForm={capture} />);
+
+    await waitFor(() => expect(form.getValues()).toEqual(PRISTINE));
+  });
+
+  it("still loads the record into the edit panel", async () => {
+    let form!: UseFormReturn<ChargeForm>;
+
+    render(
+      <SharedFormPanels
+        mode="edit"
+        onForm={(f) => {
+          form = f;
+        }}
+      />,
+      { wrapper: wrapper(queryClient) },
+    );
+
+    // reset(row) puts the whole record in, id included, so match rather than equal.
+    await waitFor(() =>
+      expect(form.getValues()).toMatchObject({
+        code: "DET",
+        description: "Detention",
+        status: "Inactive",
+      }),
+    );
+  });
+
+  // isDirty in the edit panel must keep meaning "changed since this record loaded", which
+  // is why the edit panel goes on replacing defaultValues rather than preserving them.
+  it("keeps the edit panel undirty immediately after loading a record", async () => {
+    let form!: UseFormReturn<ChargeForm>;
+
+    render(
+      <SharedFormPanels
+        mode="edit"
+        onForm={(f) => {
+          form = f;
+        }}
+      />,
+      { wrapper: wrapper(queryClient) },
+    );
+
+    await waitFor(() => expect(form.getValues().code).toBe("DET"));
+    expect(form.formState.isDirty).toBe(false);
+  });
+
+  it("opens the create panel blank when no edit panel ran first", async () => {
+    let form!: UseFormReturn<ChargeForm>;
+
+    render(
+      <SharedFormPanels
+        mode="create"
+        onForm={(f) => {
+          form = f;
+        }}
+      />,
+      { wrapper: wrapper(queryClient) },
+    );
+
+    await waitFor(() => expect(form.getValues()).toEqual(PRISTINE));
+  });
+});

client/apps/web/src/components/form-create-panel.tsx

@@ -3,6 +3,7 @@ import { Form } from "@trenova/shared/components/ui/form";
 import { SplitButton, type SplitButtonOption } from "@trenova/shared/components/ui/split-button";
 import { usePopoutWindow } from "@/hooks/popout-window/use-popout-window";
 import { useApiMutation } from "@/hooks/use-api-mutation";
+import { rememberPristineDefaults } from "@/lib/form-defaults";
 import {
   useCreatePanelActionPreference,
   type CreatePanelSaveAction,
@@ -75,15 +76,21 @@ export function FormCreatePanel<
     reset,
   } = form;
 
+  // Reset to the route's own defaults rather than whatever the form currently calls its
+  // defaults. The edit panel shares this form and replaces defaultValues with the record it
+  // loads, so a bare reset() here would open the create panel pre-filled with the last
+  // record edited.
+  const pristineDefaults = rememberPristineDefaults<TFieldValues>(form);
+
   useEffect(() => {
     if (open) {
-      reset();
+      reset(pristineDefaults);
     }
-  }, [open, reset]);
+  }, [open, reset, pristineDefaults]);
 
   const handleClose = () => {
     onOpenChange(false);
-    reset();
+    reset(pristineDefaults);
   };
 
   const { mutateAsync } = useApiMutation<TMutationData, CreateSubmitPayload, unknown, TFieldValues>(
@@ -113,9 +120,9 @@ export function FormCreatePanel<
         const action = variables.action;
         if (action === "save-close") {
           onOpenChange(false);
-          reset();
+          reset(pristineDefaults);
         } else if (action === "save-add-another") {
-          reset();
+          reset(pristineDefaults);
         }
       },
       form,
@@ -138,7 +145,7 @@ export function FormCreatePanel<
 
   const handlePanelOpenChange = (nextOpen: boolean) => {
     if (nextOpen) {
-      reset();
+      reset(pristineDefaults);
     }
     onOpenChange(nextOpen);
   };

client/apps/web/src/components/form-edit-panel.tsx

@@ -3,6 +3,7 @@ import { Form } from "@trenova/shared/components/ui/form";
 import { SplitButton, type SplitButtonOption } from "@trenova/shared/components/ui/split-button";
 import { usePopoutWindow } from "@/hooks/popout-window/use-popout-window";
 import { useApiMutation } from "@/hooks/use-api-mutation";
+import { rememberPristineDefaults } from "@/lib/form-defaults";
 import {
   useEditPanelActionPreference,
   type EditPanelSaveAction,
@@ -81,6 +82,10 @@ export function FormEditPanel<
     reset,
   } = form;
 
+  // Registers the route's defaults before the reset below overwrites them, so the create
+  // panel sharing this form has a blank state to return to.
+  rememberPristineDefaults<TFieldValues>(form);
+
   const handleClose = () => {
     onOpenChange(false);
     reset();

client/apps/web/src/lib/form-defaults.ts

@@ -0,0 +1,32 @@
+import type { DefaultValues, FieldValues } from "react-hook-form";
+
+type FormWithDefaults = {
+  control: object;
+  formState: { defaultValues?: unknown };
+};
+
+const pristineByControl = new WeakMap<object, unknown>();
+
+// rememberPristineDefaults records the defaults a route gave its form, once, and hands them
+// back on every later call.
+//
+// A route creates a single useForm and passes it to whichever of FormCreatePanel or
+// FormEditPanel the current mode selects, so the two panels share one form instance.
+// FormEditPanel loads a record with reset(row), and react-hook-form's reset REPLACES
+// defaultValues with what it is given — which is what makes isDirty mean "changed since
+// this record loaded" while editing. The cost is that a later bare reset() no longer
+// restores a blank form; it restores the record that was last edited.
+//
+// Recording happens during render, before either panel's reset effect has run, so whichever
+// panel mounts first captures the route's own defaults rather than a loaded record. Keyed on
+// control because that object is stable for the life of the form and lets the entry be
+// collected with it.
+export function rememberPristineDefaults<TFieldValues extends FieldValues>(
+  form: FormWithDefaults,
+): DefaultValues<TFieldValues> | undefined {
+  if (!pristineByControl.has(form.control)) {
+    pristineByControl.set(form.control, form.formState.defaultValues);
+  }
+
+  return pristineByControl.get(form.control) as DefaultValues<TFieldValues> | undefined;
+}