fix(plugin-form): block page unload while a modal/drawer form has unsaved input (#2998)

The in-app discard guard (#2028) only intercepts Radix close paths —
backdrop, Escape, the X. A browser refresh or tab close never reaches
them: beforeunload fired with nobody calling preventDefault, so a dirty
create/edit overlay silently lost everything the user had typed (the
dialog itself is even restored afterwards via the ?recordId= URL param,
but empty).

Register a beforeunload listener while the overlay is open and dirty
(and confirmOnDiscard hasn't been opted out), mirroring the existing
StudioDesignSurface pillar guard.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: baozhoutao

packages/plugin-form/src/DrawerForm.tsx

@@ -363,6 +363,20 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
     }
   }, [confirmOnDiscard, isDirty, finalizeClose]);
 
+  // Browser-native "leave site?" prompt on tab close / reload while the form
+  // is dirty. The in-app guard above only covers Radix close paths (backdrop,
+  // Escape, the X) — a refresh bypasses them all and the input is gone.
+  useEffect(() => {
+    if (!isOpen || !isDirty || !confirmOnDiscard) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      // Required for Chrome to actually show the prompt.
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isOpen, isDirty, confirmOnDiscard]);
+
   // The explicit Cancel button is an *intentional* discard, so it closes
   // immediately — no "Discard changes?" prompt. The unsaved-changes guard only
   // intercepts *accidental* closes (backdrop click, Escape, the X), which Radix

packages/plugin-form/src/ModalForm.tsx

@@ -454,6 +454,20 @@ export const ModalForm: React.FC<ModalFormProps> = ({
     }
   }, [confirmOnDiscard, isDirty, finalizeClose]);
 
+  // Browser-native "leave site?" prompt on tab close / reload while the form
+  // is dirty. The in-app guard above only covers Radix close paths (backdrop,
+  // Escape, the X) — a refresh bypasses them all and the input is gone.
+  useEffect(() => {
+    if (!isOpen || !isDirty || !confirmOnDiscard) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      // Required for Chrome to actually show the prompt.
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [isOpen, isDirty, confirmOnDiscard]);
+
   // The explicit Cancel button is an *intentional* discard, so it closes
   // immediately — no "Discard changes?" prompt. The unsaved-changes guard only
   // intercepts *accidental* closes (backdrop click, Escape, the X), which Radix

packages/plugin-form/src/discardGuard.test.tsx

@@ -203,3 +203,58 @@ describe('DrawerForm unsaved-changes guard', () => {
     expect(onOpenChange).not.toHaveBeenCalled();
   });
 });
+
+/**
+ * Browser refresh / tab close while dirty. The Radix close guard above never
+ * sees an unload — only a `beforeunload` listener can intercept it, so a dirty
+ * overlay must register one (and a pristine one must not, or every navigation
+ * away from the app would prompt).
+ */
+function fireBeforeUnload(): Event {
+  const evt = new Event('beforeunload', { cancelable: true });
+  window.dispatchEvent(evt);
+  return evt;
+}
+
+describe.each([
+  ['ModalForm', ModalForm],
+  ['DrawerForm', DrawerForm],
+] as const)('%s beforeunload guard', (_name, Form) => {
+  it('does not block unload while the form is pristine', async () => {
+    render(
+      <Form
+        schema={{ objectName: 'task', mode: 'create', open: true, onOpenChange: vi.fn() } as any}
+        dataSource={ds}
+      />,
+    );
+    await waitFor(() => {
+      if (!document.querySelector('input')) throw new Error('form not ready');
+    });
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(false);
+  });
+
+  it('blocks unload while the form is dirty', async () => {
+    render(
+      <Form
+        schema={{ objectName: 'task', mode: 'create', open: true, onOpenChange: vi.fn() } as any}
+        dataSource={ds}
+      />,
+    );
+    await dirtyTheForm();
+
+    await waitFor(() => expect(fireBeforeUnload().defaultPrevented).toBe(true));
+  });
+
+  it('does not block unload when confirmOnDiscard is false, even dirty', async () => {
+    render(
+      <Form
+        schema={{ objectName: 'task', mode: 'create', open: true, confirmOnDiscard: false, onOpenChange: vi.fn() } as any}
+        dataSource={ds}
+      />,
+    );
+    await dirtyTheForm();
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(false);
+  });
+});