fix: improve TypeAsyncDropdown component by optimizing state management and removing unnecessary console logs

components/form/field/TypeAsyncDropdown.tsx

@@ -25,8 +25,7 @@ export const TypeAsyncDropdown: React.FC<any> = ({
   required = false,
   autoRefresh = false,
 }) => {
-  const [additionalData, setAdditionalData] = useState({ page: 1, cache: 0 });
-
+  const [cacheUniq, setCacheUniq] = useState(0);
   const [open, setOpen] = useState(false as boolean);
   const [refreshKey, setRefreshKey] = useState(Date.now());
   const selectRef = useRef<HTMLDivElement>(null);
@@ -287,6 +286,13 @@ export const TypeAsyncDropdown: React.FC<any> = ({
       setWidth(selectRef.current.offsetWidth);
     }
   }, [selectRef]);
+  const customFilterOption = (option: any, rawInput: any) => {
+    // option.data berisi data opsi, misalnya label dan value
+    // rawInput adalah string yang diketik pengguna
+    console.log(option, rawInput);
+    return true;
+  };
+  const increaseUniq = (uniq: number) => uniq + 1;
   return (
     <div ref={selectRef} className="w-full">
       <AsyncPaginate
@@ -339,10 +345,7 @@ export const TypeAsyncDropdown: React.FC<any> = ({
         )}
         isClearable={clearable}
         onMenuOpen={() => {
-          if (autoRefresh) {
-          } else {
-          }
-          console.log(additionalData);
+          if (autoRefresh) setCacheUniq(increaseUniq);
           setOpen(true);
         }}
         onMenuClose={() => {
@@ -350,12 +353,14 @@ export const TypeAsyncDropdown: React.FC<any> = ({
         }}
         closeMenuOnSelect={mode === "dropdown" ? true : false}
         // closeMenuOnSelect={false}
+        cacheUniqs={[cacheUniq]}
         getOptionValue={(item) => item.value}
         getOptionLabel={(item) => item.label}
         value={value}
         components={{ MultiValue, Option, Menu: CustomMenu }}
         loadOptions={loadOptions}
         isSearchable={true}
+        // filterOption={customFilterOption}
         isMulti={mode === "multi"}
         onChange={(e) => {
           setOpen(mode === "dropdown" ? false : true);
@@ -372,7 +377,9 @@ export const TypeAsyncDropdown: React.FC<any> = ({
             onChange({ ...e, data: e });
           }
         }}
-        additional={additionalData}
+        additional={{
+          page: 1,
+        }}
       />
     </div>
   );

components/tablelist/TableBetter.tsx

@@ -153,7 +153,6 @@ export const TableEditBetter: React.FC<any> = ({
     setColumns(col);
     local.data = fm?.data[name] || [];
     local.render();
-    console.log(columns);
     fm.fields[name] = {
       name: name,
       type: "table",
@@ -173,7 +172,7 @@ export const TableEditBetter: React.FC<any> = ({
     <>
       <div className="tbl-wrapper flex flex-grow flex-col">
         {!disabledHeader ? (
-          <div className="head-tbl-list block items-start justify-between  bg-white px-0 py-4 sm:flex">
+          <div className="px-2 head-tbl-list block items-start justify-between  bg-white px-0 py-4 sm:flex">
             <div className="flex flex-row h-full">
               <div className="sm:flex flex flex-col space-y-2 flex-grow">
                 <div className="flex flex-grow flex-row">