From d2b19cbd7bdd1edba7c452c8a0ed488f8d73ddba Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 5 Jan 2026 15:07:09 +0700
Subject: [PATCH] refactor(FE): Force form remount on initialValues change

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 85d5a6e2..b90a7c91 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -52,9 +52,14 @@ const PurchaseOrderAcceptApprovalForm = ({
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
+  const [key, setKey] = useState(0);
 
   const isRejected = initialValues?.latest_approval?.action === 'REJECTED';
 
+  useEffect(() => {
+    setKey((prev) => prev + 1);
+  }, [initialValues?.id]);
+
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
     idx: number,
@@ -164,7 +169,7 @@ const PurchaseOrderAcceptApprovalForm = ({
     validationSchema: PurchaseRequestAcceptApprovalFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
-    enableReinitialize: true,
+    enableReinitialize: false,
     onSubmit: async (values) => {
       const payload: CreateAcceptApprovalRequestPayload = {
         action: 'APPROVED',
@@ -252,7 +257,7 @@ const PurchaseOrderAcceptApprovalForm = ({
       });
       formik.setFieldValue('items', updatedItems);
     }
-  }, [purchaseItems, initialValues]);
+  }, [purchaseItems, initialValues, key]);
 
   useEffect(() => {
     if (
@@ -342,7 +347,11 @@ const PurchaseOrderAcceptApprovalForm = ({
   };
 
   return (
-    <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
+    <form
+      key={key}
+      onSubmit={formik.handleSubmit}
+      className='w-full flex flex-col gap-6'
+    >
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
           {type === 'add'
@@ -705,7 +714,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               color='warning'
               className='px-4'
               onClick={() => {
-                formik.resetForm();
+                if (type === 'add') {
+                  formik.resetForm();
+                }
                 setPurchaseOrderFormErrorMessage('');
                 onCancel?.();
                 onModalClose?.();