fix: implement lazy loading for select input

This commit is contained in:
ValdiANS
2026-04-12 21:36:40 +07:00
parent c66f7b1cbf
commit 9cf0d15c33
@@ -88,21 +88,33 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
const filterModal = useModal(); const filterModal = useModal();
// ===== OPTIONS ===== // ===== OPTIONS =====
const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect( const {
AreaApi.basePath, options: areaOptions,
'id', isLoadingOptions: isLoadingAreas,
'name', setInputValue: setAreaInputValue,
'search' loadMore: loadMoreArea,
); } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
const { options: locationOptions, isLoadingOptions: isLoadingLocations } = const {
useSelect(LocationApi.basePath, 'id', 'name', 'search'); options: locationOptions,
isLoadingOptions: isLoadingLocations,
setInputValue: setLocationInputValue,
loadMore: loadMoreLocation,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search');
const { options: warehouseOptions, isLoadingOptions: isLoadingWarehouses } = const {
useSelect(WarehouseApi.basePath, 'id', 'name', 'search'); options: warehouseOptions,
isLoadingOptions: isLoadingWarehouses,
setInputValue: setWarehouseInputValue,
loadMore: loadMoreWarehouse,
} = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
const { options: customerOptions, isLoadingOptions: isLoadingCustomers } = const {
useSelect(CustomerApi.basePath, 'id', 'name', 'search'); options: customerOptions,
isLoadingOptions: isLoadingCustomers,
setInputValue: setCustomerInputValue,
loadMore: loadMoreCustomer,
} = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
// ===== FORMIK SETUP ===== // ===== FORMIK SETUP =====
const formik = useFormik<DailyMarketingReportFilterType>({ const formik = useFormik<DailyMarketingReportFilterType>({
@@ -837,6 +849,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}} }}
isClearable isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
onInputChange={setAreaInputValue}
onMenuScrollToBottom={loadMoreArea}
/> />
{/* Location Filter */} {/* Location Filter */}
@@ -854,6 +868,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}} }}
isClearable isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
onInputChange={setLocationInputValue}
onMenuScrollToBottom={loadMoreLocation}
/> />
{/* Warehouse Filter */} {/* Warehouse Filter */}
@@ -871,6 +887,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}} }}
isClearable isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
onInputChange={setWarehouseInputValue}
onMenuScrollToBottom={loadMoreWarehouse}
/> />
{/* Customer Filter */} {/* Customer Filter */}
@@ -888,6 +906,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}} }}
isClearable isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
onInputChange={setCustomerInputValue}
onMenuScrollToBottom={loadMoreCustomer}
/> />
{/* Filter By Date Type */} {/* Filter By Date Type */}