diff --git a/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx b/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx
index 1e97b286df3a..6d97c9475b2a 100644
--- a/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx
+++ b/src/pages/iou/request/step/IOURequestStepPerDiemWorkspace.tsx
@@ -1,6 +1,7 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import * as Expensicons from '@components/Icon/Expensicons';
+import SearchBar from '@components/SearchBar';
import SelectionList from '@components/SelectionList';
import type {ListItem} from '@components/SelectionList/ListItem/types';
import UserListItem from '@components/SelectionList/ListItem/UserListItem';
@@ -8,10 +9,12 @@ import Text from '@components/Text';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
+import useSearchResults from '@hooks/useSearchResults';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import {getActivePoliciesWithExpenseChatAndPerDiemEnabled, getPerDiemCustomUnit, getPolicy, sortWorkspacesBySelected} from '@libs/PolicyUtils';
import {getDefaultWorkspaceAvatar, getPolicyExpenseChat} from '@libs/ReportUtils';
+import tokenizedSearch from '@libs/tokenizedSearch';
import {setCustomUnitID, setMoneyRequestCategory, setMoneyRequestParticipants} from '@userActions/IOU';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
@@ -70,6 +73,20 @@ function IOURequestStepPerDiemWorkspace({
}));
}, [allPolicies, currentUserLogin, selectedWorkspace, localeCompare]);
+ const filterWorkspace = useCallback((workspaceOption: WorkspaceListItem, searchInput: string) => {
+ const results = tokenizedSearch([workspaceOption], searchInput, (option) => [option.text ?? '']);
+ return results.length > 0;
+ }, []);
+
+ const sortWorkspaces = useCallback(
+ (data: WorkspaceListItem[]) => {
+ return data.sort((a, b) => localeCompare(a.text ?? '', b?.text ?? ''));
+ },
+ [localeCompare],
+ );
+
+ const [inputValue, setInputValue, filteredWorkspaceOptions] = useSearchResults(workspaceOptions, filterWorkspace, sortWorkspaces);
+
const selectWorkspace = (item: WorkspaceListItem) => {
const policyExpenseReportID = getPolicyExpenseChat(accountID, item.value)?.reportID;
if (!policyExpenseReportID) {
@@ -95,12 +112,21 @@ function IOURequestStepPerDiemWorkspace({
return (
<>
-
- {translate('iou.chooseWorkspace')}
-
+ {workspaceOptions.length > CONST.SEARCH_ITEM_LIMIT ? (
+ 0 && filteredWorkspaceOptions.length === 0}
+ />
+ ) : (
+
+ {translate('iou.chooseWorkspace')}
+
+ )}