refactor(FE): Force form remount on initialValues change

This commit is contained in:
rstubryan
2026-01-05 15:07:09 +07:00
parent 2c29cffa45
commit d2b19cbd7b
@@ -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?.();