@carlonicora/nextjs-jsonapi 6.29.0 → 6.30.0

package/src/components/forms/CommonEditorButtons.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { useTranslations } from "next-intl";
+import { Loader2 } from "lucide-react";
 import { Button } from "../../shadcnui";
 
 type CommonEditorButtonsProps = {
@@ -22,6 +23,19 @@ export function CommonEditorButtons({
 }: CommonEditorButtonsProps) {
   const t = useTranslations();
 
+  const submitLabel: ReactNode = form.formState.isSubmitting ? (
+    <>
+      <Loader2 className="h-4 w-4 animate-spin" />
+      {t(`ui.buttons.saving`)}
+    </>
+  ) : buttonTitle ? (
+    buttonTitle
+  ) : isEdit ? (
+    t(`ui.buttons.confirm_update`)
+  ) : (
+    t(`ui.buttons.confirm_create`)
+  );
+
   if (centerButtons) {
     return (
       <div className="flex w-full items-center justify-between gap-x-2">
@@ -33,7 +47,7 @@ export function CommonEditorButtons({
 
         {!hideSubmit ? (
           <Button type="submit" disabled={form.formState.isSubmitting || disabled} data-testid={`modal-button-create`}>
-            {buttonTitle ? buttonTitle : isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
+            {submitLabel}
           </Button>
         ) : (
           <div />
@@ -56,7 +70,7 @@ export function CommonEditorButtons({
 
       {!hideSubmit && (
         <Button type="submit" disabled={form.formState.isSubmitting || disabled} data-testid={`modal-button-create`}>
-          {buttonTitle ? buttonTitle : isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
+          {submitLabel}
         </Button>
       )}
     </div>

package/src/components/forms/EditorSheet.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { isValidElement, ReactElement, ReactNode, useCallback, useEffect, useRef } from "react";
+import { isValidElement, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { PencilIcon } from "lucide-react";
 import { ActionBarProvider, useIsInActionBar } from "../../contexts/ActionBarContext";
@@ -200,7 +200,12 @@ export function EditorSheet<T extends FieldValues>({
   const hasBeenOpen = useRef(false);
   // Fingerprint of the values the form was last seeded with, used to detect that
   // the entity behind `onReset` has changed while the sheet was closed.
-  const seeded = useRef<string | undefined>(undefined);
+  // An edit form starts seeded with the entity as it was at mount (the values its
+  // `useForm` defaults came from), so the FIRST open also notices an entity that
+  // changed since — e.g. content autosaved on the page — instead of showing the
+  // mount-time values and saving them back over the newer ones.
+  const [mountFingerprint] = useState(() => (isEdit ? JSON.stringify(onReset()) : undefined));
+  const seeded = useRef<string | undefined>(mountFingerprint);
 
   useEffect(() => {
     if (open) {

package/src/components/forms/__tests__/EditorSheet.spec.tsx

@@ -344,6 +344,42 @@ describe("EditorSheet", () => {
     });
   });
 
+  describe("edit form seeding", () => {
+    function EntityEditor({ name }: { name: string }) {
+      const form = useForm<TestValues>({ resolver: zodResolver(schema), defaultValues: { name } });
+      return (
+        <EditorSheet
+          form={form}
+          onSubmit={vi.fn().mockResolvedValue({ id: "123" })}
+          onReset={() => ({ name })}
+          entityType="Test Entity"
+          isEdit={true}
+          module={testModule}
+        >
+          <input {...form.register("name")} data-testid="name-input" />
+        </EditorSheet>
+      );
+    }
+
+    it("opens the first time with the entity as it is now, not as it was at mount", async () => {
+      const r = render(<EntityEditor name="Old" />);
+      // The page saved a newer value (e.g. autosaved content) before the sheet ever opened.
+      r.rerender(<EntityEditor name="New" />);
+
+      await userEvent.click(document.querySelector('[data-help="editor.edit"]') as HTMLElement);
+
+      expect(screen.getByTestId("name-input")).toHaveValue("New");
+    });
+
+    it("keeps the mount values on the first open when the entity did not change", async () => {
+      render(<EntityEditor name="Same" />);
+
+      await userEvent.click(document.querySelector('[data-help="editor.edit"]') as HTMLElement);
+
+      expect(screen.getByTestId("name-input")).toHaveValue("Same");
+    });
+  });
+
   describe("Activity hide and reveal (back/forward)", () => {
     it("uncontrolled sheet is closed and the form reset after Activity reveal", async () => {
       const page = (mode: "visible" | "hidden") => (