feat: add autoRefresh prop to Field and TypeAsyncDropdown components for enhanced data fetching

components/form/Field.tsx

@@ -67,6 +67,7 @@ export interface FieldProps {
   pagination?: boolean;
   search?: "api" | "local";
   visibleLabel?: boolean;
+  autoRefresh?: boolean;
 }
 export const Field: React.FC<FieldProps> = ({
   fm,
@@ -97,6 +98,7 @@ export const Field: React.FC<FieldProps> = ({
   target,
   pagination = true,
   search = "api",
+  autoRefresh = false,
 }) => {
   let result = null;
   const field = useLocal({
@@ -217,7 +219,7 @@ export const Field: React.FC<FieldProps> = ({
           <div
             className={cn(
               is_disable
-                ? "border border-gray-100 bg-gray-100"
+                ? "border border-gray-100 bg-gray-100 is_disable"
                 : "border border-gray-300 ",
               "relative field",
               !is_disable
@@ -355,6 +357,7 @@ export const Field: React.FC<FieldProps> = ({
                   <TypeAsyncDropdown
                     label={label}
                     fm={fm}
+                    autoRefresh={autoRefresh}
                     fields={initField}
                     required={required}
                     name={name}

components/form/field/TypeAsyncDropdown.tsx

@@ -23,6 +23,7 @@ export const TypeAsyncDropdown: React.FC<any> = ({
   pagination = true,
   search = "api",
   required = false,
+  autoRefresh = false,
 }) => {
   const [open, setOpen] = useState(false as boolean);
   const [refreshKey, setRefreshKey] = useState(Date.now());
@@ -203,7 +204,7 @@ export const TypeAsyncDropdown: React.FC<any> = ({
     }
   } else if (typeof value === "object") {
     value = {
-      value: getLabel(value),
+      value: getValue(value),
       label: getLabel(value),
     };
   } else if (
@@ -258,7 +259,9 @@ export const TypeAsyncDropdown: React.FC<any> = ({
         classNameTrigger={""}
         arrow={false}
         className="rounded-md"
-        onOpenChange={(open: any) => {}}
+        onOpenChange={(open: any) => {
+          setOpen(open);
+        }}
         open={true}
         content={
           <div
@@ -335,12 +338,15 @@ export const TypeAsyncDropdown: React.FC<any> = ({
         isClearable={clearable}
         onMenuOpen={() => {
           setOpen(true);
+          if (autoRefresh) {
+            setRefreshKey(Date.now()); // Refresh API saat menu dibuka jika autoRefresh true
+          }
         }}
         onMenuClose={() => {
           setOpen(false);
         }}
-        // closeMenuOnSelect={mode === "dropdown" ? true : false}
-        closeMenuOnSelect={false}
+        closeMenuOnSelect={mode === "dropdown" ? true : false}
+        // closeMenuOnSelect={false}
         getOptionValue={(item) => item.value}
         getOptionLabel={(item) => item.label}
         value={value}

components/tablelist/TableList.tsx

@@ -518,12 +518,12 @@ export const TableList = <T extends object>({
       };
   const [pagination, setPagination] = React.useState({
     pageIndex: 0,
-    pageSize: 20,
+    pageSize: take,
   });
   const table = useReactTable({
     data: data,
     columnResizeMode,
-    pageCount: Math.ceil(local.count / 20),
+    pageCount: Math.ceil(local.count / take),
     manualPagination: true,
     columnResizeDirection,
     columns,
@@ -534,7 +534,7 @@ export const TableList = <T extends object>({
     initialState: {
       pagination: {
         pageIndex: 0,
-        pageSize: 20, //custom default page size
+        pageSize: take, //custom default page size
       },
     },
     state: {
@@ -1078,7 +1078,7 @@ export const TableList = <T extends object>({
           setPage={(page: any) => {
             setPagination({
               pageIndex: page,
-              pageSize: 20,
+              pageSize: take,
             });
             local.paging = page;
             local.render();