fix: confirmation modal not working

Author: pan93412

components/update-modal/form-body.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { DialogFooter } from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
-import { useFormDirtyWarning } from "@/hooks/use-form-dirty-warning";
 import React, { useEffect } from "react";
 import { type FieldValues, type SubmitHandler, type UseFormReturn } from "react-hook-form";
 
@@ -21,12 +20,18 @@ export function UpdateFormBody<T extends FieldValues>({
   onFormStateChange,
   children,
 }: UpdateFormBodyProps<T>) {
-  useFormDirtyWarning(form.formState.isDirty);
-
-  // Notify parent component about form dirty state changes
   useEffect(() => {
-    onFormStateChange?.(form.formState.isDirty);
-  }, [form.formState.isDirty, onFormStateChange]);
+    const unsubscribe = form.subscribe({
+      formState: {
+        isDirty: true,
+      },
+      callback: (data) => {
+        onFormStateChange?.(data.isDirty ?? false);
+      },
+    })
+
+    return () => unsubscribe();
+  }, [form, onFormStateChange]);
 
   const handleSubmit = (data: T) => {
     form.reset();

hooks/use-dialog-close-confirmation.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export interface UseDialogCloseConfirmationOptions {
   isDirty: boolean;
@@ -13,6 +13,23 @@ export function useDialogCloseConfirmation({
 }: UseDialogCloseConfirmationOptions) {
   const [showConfirmation, setShowConfirmation] = useState(false);
 
+  useEffect(() => {
+    const message = "您有尚未儲存的更動。確定要關閉而不儲存嗎？您的更動將會遺失。";
+    if (!isDirty) return;
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = message;
+      return message;
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty])
+
   const handleDialogOpenChange = useCallback(
     (newOpen: boolean) => {
       // If trying to close the dialog and form is dirty