From 8faed2e561926e5f6080f65356260944a53b54c2 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 09:44:38 +0700
Subject: [PATCH] fix: implement lazy loading in select input in filter modal

---
 .../tab/PurchasesPerSupplierTab.tsx           | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index c8ffa399..b3f5c2ec 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -70,24 +70,34 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   const filterModal = useModal();
 
   // ===== OPTIONS =====
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    setInputValue: setAreaInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
-    useSelect(SupplierApi.basePath, 'id', 'name', 'search', {
-      category: 'SAPRONAK',
-    });
+  const {
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    setInputValue: setSupplierInputValue,
+    loadMore: loadMoreSupplier,
+  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'SAPRONAK',
+  });
 
-  const { options: productOptions, isLoadingOptions: isLoadingProducts } =
-    useSelect(ProductApi.basePath, 'id', 'name', 'search');
+  const {
+    options: productOptions,
+    isLoadingOptions: isLoadingProducts,
+    setInputValue: setProductInputValue,
+    loadMore: loadMoreProduct,
+  } = useSelect(ProductApi.basePath, 'id', 'name', 'search');
 
   const {
     options: productCategoryOptions,
     isLoadingOptions: isLoadingProductCategories,
+    setInputValue: setProductCategoryInputValue,
+    loadMore: loadMoreProductCategory,
   } = useSelect(ProductCategoryApi.basePath, 'id', 'name', 'search');
 
   const dataTypeOptions = useMemo(
@@ -907,6 +917,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingAreas}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreArea}
             />
 
             {/* Supplier Filter */}
@@ -926,6 +938,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingSuppliers}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setSupplierInputValue}
+              onMenuScrollToBottom={loadMoreSupplier}
             />
 
             {/* Product Filter */}
@@ -945,6 +959,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingProducts}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setProductInputValue}
+              onMenuScrollToBottom={loadMoreProduct}
             />
 
             {/* Product Category Filter */}
@@ -964,6 +980,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingProductCategories}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setProductCategoryInputValue}
+              onMenuScrollToBottom={loadMoreProductCategory}
             />
 
             {/* Filter By Type */}