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 searchParams = useSearchParams();
const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] = const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
useState(''); useState('');
const [key, setKey] = useState(0);
const isRejected = initialValues?.latest_approval?.action === 'REJECTED'; const isRejected = initialValues?.latest_approval?.action === 'REJECTED';
useEffect(() => {
setKey((prev) => prev + 1);
}, [initialValues?.id]);
// ===== UTILITY FUNCTIONS ===== // ===== UTILITY FUNCTIONS =====
const isRepeaterInputError = ( const isRepeaterInputError = (
idx: number, idx: number,
@@ -164,7 +169,7 @@ const PurchaseOrderAcceptApprovalForm = ({
validationSchema: PurchaseRequestAcceptApprovalFormSchema, validationSchema: PurchaseRequestAcceptApprovalFormSchema,
validateOnChange: true, validateOnChange: true,
validateOnBlur: true, validateOnBlur: true,
enableReinitialize: true, enableReinitialize: false,
onSubmit: async (values) => { onSubmit: async (values) => {
const payload: CreateAcceptApprovalRequestPayload = { const payload: CreateAcceptApprovalRequestPayload = {
action: 'APPROVED', action: 'APPROVED',
@@ -252,7 +257,7 @@ const PurchaseOrderAcceptApprovalForm = ({
}); });
formik.setFieldValue('items', updatedItems); formik.setFieldValue('items', updatedItems);
} }
}, [purchaseItems, initialValues]); }, [purchaseItems, initialValues, key]);
useEffect(() => { useEffect(() => {
if ( if (
@@ -342,7 +347,11 @@ const PurchaseOrderAcceptApprovalForm = ({
}; };
return ( 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'> <div className='w-full'>
<h2 className='text-lg font-semibold mb-4'> <h2 className='text-lg font-semibold mb-4'>
{type === 'add' {type === 'add'
@@ -705,7 +714,9 @@ const PurchaseOrderAcceptApprovalForm = ({
color='warning' color='warning'
className='px-4' className='px-4'
onClick={() => { onClick={() => {
formik.resetForm(); if (type === 'add') {
formik.resetForm();
}
setPurchaseOrderFormErrorMessage(''); setPurchaseOrderFormErrorMessage('');
onCancel?.(); onCancel?.();
onModalClose?.(); onModalClose?.();