refactor(FE): Refactor Formik field updates to use setFieldValue

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -23,7 +23,6 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
 import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
-import SelectInput from '@/components/input/SelectInput';
 import { OptionType } from '@/components/input/SelectInput';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 
@@ -167,6 +166,8 @@ const SuppliersTable = () => {
     },
   });
 
+  const { setFieldValue } = formik;
+
   // ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
   const categoryOptions = useMemo(
     () => [
@@ -191,9 +192,9 @@ const SuppliersTable = () => {
       const option = val as OptionType | null;
       const categoryId = option?.value ? String(option.value) : null;
 
-      formik.setFieldValue('category_id', categoryId);
+      setFieldValue('category_id', categoryId);
     },
-    [formik]
+    [setFieldValue]
   );
 
   const handleFilterFlagChange = useCallback(
@@ -206,9 +207,9 @@ const SuppliersTable = () => {
             ? false
             : null;
 
-      formik.setFieldValue('flag', boolValue);
+      setFieldValue('flag', boolValue);
     },
-    [formik]
+    [setFieldValue]
   );
 
   // ===== FILTER HELPERS =====
@@ -238,9 +239,9 @@ const SuppliersTable = () => {
     if (filterModal.open) {
       const flagBoolValue =
         tableFilterState.flagFilter === 'EKSPEDISI' ? true : false;
-      formik.setFieldValue('flag', flagBoolValue);
+      setFieldValue('flag', flagBoolValue);
     }
-  }, [filterModal.open, tableFilterState.flagFilter]);
+  }, [filterModal.open, tableFilterState.flagFilter, setFieldValue]);
 
   useEffect(() => {
     updateFilter('search', searchValue);
@@ -508,6 +509,7 @@ const SuppliersTable = () => {
               options={flagOptions}
               value={flagValue}
               onChange={handleFilterFlagChange}
+              isClearable
               className={{ wrapper: 'w-full' }}
             />
           </div>

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -167,29 +167,26 @@ const SupplierForm = ({
     },
   });
 
-  const { setValues: formikSetValues } = formik;
+  const { setFieldValue } = formik;
 
   // Initialize Formik
   useEffect(() => {
-    formikSetValues(formikInitialValues);
-    if (formType != 'add') {
-      const hatcheryArrays = formikInitialValues.hatchery?.split(',');
-      const hatcheryCreatedOptions = hatcheryArrays?.map((item) => ({
+    if (formType !== 'add' && initialValues?.hatchery) {
+      const hatcheryArrays = initialValues.hatchery.split(',');
+      const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
         value: item,
         label: item,
       }));
-      setHatcheryOptionValues(hatcheryCreatedOptions ?? []);
+      setHatcheryOptionValues(hatcheryCreatedOptions);
     }
-  }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
+  }, [formType, initialValues?.hatchery]);
+
   useEffect(() => {
     const commaSeparatedValues = hatcheryOptionsValues
       .map((item) => item.value)
       .join(',');
-    formikSetValues({
-      ...formik.values,
-      hatchery: commaSeparatedValues,
-    });
-  }, [hatcheryOptionsValues, formikSetValues]);
+    setFieldValue('hatchery', commaSeparatedValues);
+  }, [hatcheryOptionsValues, setFieldValue]);
 
   // Option Handler
   const typeChangeHandler = (val: OptionType | OptionType[] | null) => {