Merge pull request #61844 from daledah/fix/61821

mountiny · web-flow · commit 9268603d3ba3 · 2025-05-13T09:41:42.000+02:00
diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx
@@ -17,10 +17,11 @@ type SelectionListWithModalProps<TItem extends ListItem> = SelectionListProps<TI
     onTurnOnSelectionMode?: (item: TItem | null) => void;
     isSelected?: (item: TItem) => boolean;
     isScreenFocused?: boolean;
+    selectedItemKeys?: Array<string | number>;
 };
 
 function SelectionListWithModal<TItem extends ListItem>(
-    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, isScreenFocused = false, sections, isSelected, ...rest}: SelectionListWithModalProps<TItem>,
+    {turnOnSelectionModeOnLongPress, onTurnOnSelectionMode, onLongPressRow, isScreenFocused = false, sections, isSelected, selectedItemKeys, ...rest}: SelectionListWithModalProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -40,12 +41,14 @@ function SelectionListWithModal<TItem extends ListItem>(
 
     useEffect(() => {
         // We can access 0 index safely as we are not displaying multiple sections in table view
-        const selectedItems = sections[0].data.filter((item) => {
-            if (isSelected) {
-                return isSelected(item);
-            }
-            return !!item.isSelected;
-        });
+        const selectedItems =
+            selectedItemKeys ??
+            sections[0].data.filter((item) => {
+                if (isSelected) {
+                    return isSelected(item);
+                }
+                return !!item.isSelected;
+            });
         selectionRef.current = selectedItems.length;
 
         if (!isSmallScreenWidth) {
@@ -66,7 +69,7 @@ function SelectionListWithModal<TItem extends ListItem>(
             turnOffMobileSelectionMode();
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [sections, isSmallScreenWidth, isSelected, isFocused]);
+    }, [sections, selectedItemKeys, selectionMode, isSmallScreenWidth, isSelected, isFocused]);
 
     useEffect(
         () => () => {
diff --git a/src/hooks/useSearchResults.ts b/src/hooks/useSearchResults.ts
@@ -1,4 +1,5 @@
-import {useEffect, useState, useTransition} from 'react';
+import {useEffect, useRef, useState, useTransition} from 'react';
+import type {ListItem} from '@components/SelectionList/types';
 import CONST from '@src/CONST';
 import usePrevious from './usePrevious';
 
@@ -7,15 +8,21 @@ import usePrevious from './usePrevious';
  * It utilizes `useTransition` to allow the searchQuery to change rapidly, while more expensive renders that occur using
  * the result of the filtering and sorting are deprioritized, allowing them to happen in the background.
  */
-function useSearchResults<TValue>(data: TValue[], filterData: (datum: TValue, searchInput: string) => boolean, sortData: (data: TValue[]) => TValue[] = (d) => d) {
+function useSearchResults<TValue extends ListItem>(data: TValue[], filterData: (datum: TValue, searchInput: string) => boolean, sortData: (data: TValue[]) => TValue[] = (d) => d) {
     const [inputValue, setInputValue] = useState('');
     const [result, setResult] = useState(data);
-    const [, startTransition] = useTransition();
     const prevData = usePrevious(data);
+    const prevInputValueRef = useRef<string | undefined>(undefined);
+    const [, startTransition] = useTransition();
     useEffect(() => {
+        const normalizedSearchQuery = inputValue.trim().toLowerCase();
+        const filtered = normalizedSearchQuery.length ? data.filter((item) => filterData(item, normalizedSearchQuery)) : data;
+        if (prevInputValueRef.current === inputValue) {
+            setResult(filtered);
+            return;
+        }
+        prevInputValueRef.current = inputValue;
         startTransition(() => {
-            const normalizedSearchQuery = inputValue.trim().toLowerCase();
-            const filtered = normalizedSearchQuery.length ? data.filter((item) => filterData(item, normalizedSearchQuery)) : data;
             const sorted = sortData(filtered);
             setResult(sorted);
         });
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -704,8 +704,6 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
 
     const selectionModeHeader = selectionMode?.isEnabled && shouldUseNarrowLayout;
 
-    const sections = useMemo(() => [{data: filteredData, isDisabled: false}], [filteredData]);
-
     return (
         <WorkspacePageWithSections
             headerText={selectionModeHeader ? translate('common.selectMultiple') : translate('workspace.common.members')}
@@ -774,7 +772,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
                         showsVerticalScrollIndicator={false}
                         contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
                     >
-                        {shouldUseNarrowLayout && filteredData.length > 0 && <View style={[styles.pr5]}>{getHeaderContent()}</View>}
+                        {shouldUseNarrowLayout && data.length > 0 && <View style={[styles.pr5]}>{getHeaderContent()}</View>}
                         {!shouldUseNarrowLayout && (
                             <>
                                 {!!headerMessage && (
@@ -797,7 +795,8 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
                             <SelectionListWithModal
                                 ref={selectionListRef}
                                 canSelectMultiple={canSelectMultiple}
-                                sections={sections}
+                                sections={[{data: filteredData, isDisabled: false}]}
+                                selectedItemKeys={selectedEmployees}
                                 ListItem={TableListItem}
                                 turnOnSelectionModeOnLongPress={isPolicyAdmin}
                                 onTurnOnSelectionMode={(item) => item && toggleUser(item?.accountID)}
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -162,9 +162,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
     }, []);
     const [inputValue, setInputValue, filteredCategoryList] = useSearchResults(categoryList, filterCategory, sortCategories);
 
-    useAutoTurnSelectionModeOffWhenHasNoActiveOption(filteredCategoryList);
-
-    const sections = useMemo(() => [{data: filteredCategoryList, isDisabled: false}], [filteredCategoryList]);
+    useAutoTurnSelectionModeOffWhenHasNoActiveOption(categoryList);
 
     const toggleCategory = useCallback(
         (category: PolicyOption) => {
@@ -466,7 +464,8 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
                             canSelectMultiple={canSelectMultiple}
                             turnOnSelectionModeOnLongPress={isSmallScreenWidth}
                             onTurnOnSelectionMode={(item) => item && toggleCategory(item)}
-                            sections={sections}
+                            sections={[{data: filteredCategoryList, isDisabled: false}]}
+                            selectedItemKeys={selectedCategories}
                             onCheckboxPress={toggleCategory}
                             onSelectRow={navigateToCategorySettings}
                             shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -187,7 +187,6 @@ function PolicyDistanceRatesPage({
     }, []);
     const sortRates = useCallback((rates: RateForList[]) => rates.sort((a, b) => (a.rate ?? 0) - (b.rate ?? 0)), []);
     const [inputValue, setInputValue, filteredDistanceRatesList] = useSearchResults(distanceRatesList, filterRate, sortRates);
-    const sections = useMemo(() => [{data: filteredDistanceRatesList, key: 'distanceRatesList'}], [filteredDistanceRatesList]);
 
     const addRate = () => {
         Navigation.navigate(ROUTES.WORKSPACE_CREATE_DISTANCE_RATE.getRoute(policyID));
@@ -411,7 +410,8 @@ function PolicyDistanceRatesPage({
                             canSelectMultiple={canSelectMultiple}
                             turnOnSelectionModeOnLongPress
                             onTurnOnSelectionMode={(item) => item && toggleRate(item)}
-                            sections={sections}
+                            sections={[{data: filteredDistanceRatesList, isDisabled: false}]}
+                            selectedItemKeys={selectedDistanceRates}
                             onCheckboxPress={toggleRate}
                             onSelectRow={openRateDetails}
                             onSelectAll={toggleAllRates}
diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
@@ -135,12 +135,12 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: false});
     const {selectionMode} = useMobileSelectionMode();
 
-    const customUnit = getPerDiemCustomUnit(policy);
+    const customUnit = useMemo(() => getPerDiemCustomUnit(policy), [policy]);
     const customUnitRates: Record<string, Rate> = useMemo(() => customUnit?.rates ?? {}, [customUnit]);
 
-    const allRatesArray = Object.values(customUnitRates);
+    const allRatesArray = useMemo(() => Object.values(customUnitRates), [customUnitRates]);
 
-    const allSubRates = getSubRatesData(allRatesArray);
+    const allSubRates = useMemo(() => getSubRatesData(allRatesArray), [allRatesArray]);
 
     const canSelectMultiple = shouldUseNarrowLayout ? selectionMode?.isEnabled : true;
 
@@ -203,7 +203,6 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
     }, []);
     const sortRates = useCallback((rates: PolicyOption[]) => lodashSortBy(rates, 'text', localeCompare) as PolicyOption[], []);
     const [inputValue, setInputValue, filteredSubRatesList] = useSearchResults(subRatesList, filterRate, sortRates);
-    const sections = useMemo(() => [{data: filteredSubRatesList, isDisabled: false}], [filteredSubRatesList]);
 
     const toggleSubRate = (subRate: PolicyOption) => {
         if (selectedPerDiem.find((selectedSubRate) => selectedSubRate.subRateID === subRate.subRateID) !== undefined) {
@@ -229,19 +228,25 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
         }
     };
 
-    const getCustomListHeader = () => (
-        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3, !canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]]}>
-            <View style={styles.flex3}>
-                <Text style={[styles.textMicroSupporting, styles.alignSelfStart]}>{translate('common.destination')}</Text>
+    const getCustomListHeader = () => {
+        const header = (
+            <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3]}>
+                <View style={styles.flex3}>
+                    <Text style={[styles.textMicroSupporting, styles.alignSelfStart]}>{translate('common.destination')}</Text>
+                </View>
+                <View style={styles.flex2}>
+                    <Text style={[styles.textMicroSupporting, styles.alignItemsStart, styles.pl2]}>{translate('common.subrate')}</Text>
+                </View>
+                <View style={styles.flex2}>
+                    <Text style={[styles.textMicroSupporting, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
+                </View>
             </View>
-            <View style={styles.flex2}>
-                <Text style={[styles.textMicroSupporting, styles.alignItemsStart, styles.pl2]}>{translate('common.subrate')}</Text>
-            </View>
-            <View style={styles.flex2}>
-                <Text style={[styles.textMicroSupporting, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
-            </View>
-        </View>
-    );
+        );
+        if (canSelectMultiple) {
+            return header;
+        }
+        return <View style={!canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]}>{header}</View>;
+    };
 
     const openSettings = () => {
         Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_SETTINGS.getRoute(policyID));
@@ -446,7 +451,8 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
                             canSelectMultiple={canSelectMultiple}
                             turnOnSelectionModeOnLongPress
                             onTurnOnSelectionMode={(item) => item && toggleSubRate(item)}
-                            sections={sections}
+                            sections={[{data: filteredSubRatesList, isDisabled: false}]}
+                            selectedItemKeys={selectedPerDiem.map((item) => item.subRateID)}
                             onCheckboxPress={toggleSubRate}
                             onSelectRow={openSubRateDetails}
                             shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
