Fix/move preselected items to top

src/CONST/index.ts

@@ -1985,6 +1985,8 @@ const CONST = {
         GLOBAL_CREATE: '\uE100',
     },
 
+    MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD: 8,
+
     INVISIBLE_CODEPOINTS: ['fe0f', '200d', '2066'],
 
     UNICODE: {

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -52,7 +52,7 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
         [translate, currentCountry],
     );
 
-    const searchResults = searchOptions(debouncedSearchValue, countries);
+    const searchResults = useMemo(() => searchOptions(debouncedSearchValue, countries, currentCountry ? [currentCountry] : []), [countries, debouncedSearchValue, currentCountry]);
     const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
 
     const styles = useThemeStyles();

src/components/PushRowWithModal/PushRowModal.tsx

@@ -67,7 +67,10 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         setSearchValue('');
     };
 
-    const searchResults = searchOptions(debouncedSearchValue, options);
+    const searchResults = useMemo(
+        () => searchOptions(debouncedSearchValue, options, selectedOption ? [selectedOption] : []),
+        [debouncedSearchValue, options, selectedOption],
+    );
 
     const textInputOptions = useMemo(
         () => ({

src/components/Search/FilterDropdowns/UserSelectPopup.tsx

@@ -1,4 +1,3 @@
-import {accountIDSelector} from '@selectors/Session';
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -59,7 +58,6 @@
     const personalDetails = usePersonalDetails();
     const {windowHeight} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true, selector: accountIDSelector});
     const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
     const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST, {canBeMissing: true});
@@ -92,6 +90,10 @@
         return new Set(selectedOptions.map((option) => option.accountID).filter(Boolean));
     }, [selectedOptions]);
 
+    const initialSelectedAccountIDs = useMemo(() => {
+        return new Set(initialSelectedOptions.map((option) => option.accountID).filter(Boolean));
+    }, [initialSelectedOptions]);
+
     const optionsList = useMemo(() => {
         return memoizedGetValidOptions(
             {
@@ -119,41 +121,38 @@
     }, [optionsList, cleanSearchTerm, countryCode, loginList]);
 
     const listData = useMemo(() => {
-        const personalDetailList = filteredOptions.personalDetails.map((participant) => ({
+        const initialOptions: Array<Option & {keyForList: string}> = [];
+        const remainingOptions: Array<Option & {keyForList: string}> = [];
+
+        const personalDetailOptions = filteredOptions.personalDetails.map((participant) => ({
             ...participant,
             isSelected: selectedAccountIDs.has(participant.accountID),
             keyForList: String(participant.accountID),
         }));
 
-        const recentReportsList = filteredOptions.recentReports.map((report) => ({
+        const recentReportOptions = filteredOptions.recentReports.map((report) => ({
             ...report,
             isSelected: selectedAccountIDs.has(report.accountID),
             keyForList: String(report.reportID),
         }));
 
-        const combined = [...personalDetailList, ...recentReportsList];
+        const totalOptions = personalDetailOptions.length + recentReportOptions.length;
+        const reordered = [...personalDetailOptions, ...recentReportOptions];
 
-        combined.sort((a, b) => {
-            // selected items first
-            if (a.isSelected && !b.isSelected) {
-                return -1;
-            }
-            if (!a.isSelected && b.isSelected) {
-                return 1;
-            }
+        if (totalOptions <= CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD) {
+            return reordered;
+        }
 
-            // Put the current user at the top of the list
-            if (a.accountID === accountID) {
-                return -1;
-            }
-            if (b.accountID === accountID) {
-                return 1;
+        for (const option of reordered) {
+            if (option.accountID && initialSelectedAccountIDs.has(option.accountID)) {
+                initialOptions.push(option);
+            } else {
+                remainingOptions.push(option);
             }
-            return 0;
-        });
+        }
 
-        return combined;
-    }, [filteredOptions, accountID, selectedAccountIDs]);
+        return [...initialOptions, ...remainingOptions];
+    }, [filteredOptions, initialSelectedAccountIDs, selectedAccountIDs]);
 
     const headerMessage = useMemo(() => {
         const noResultsFound = isEmpty(listData);
@@ -165,7 +164,6 @@
             const isSelected = selectedOptions.some((selected) => optionsMatch(selected, option));
 
             setSelectedOptions((prev) => (isSelected ? prev.filter((selected) => !optionsMatch(selected, option)) : [...prev, getSelectedOptionData(option)]));
-            selectionListRef?.current?.scrollToIndex(0);
         },
         [selectedOptions],
     );
@@ -208,7 +206,7 @@
                 canSelectMultiple
                 ListItem={UserSelectionListItem}
                 style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
                 onSelectRow={selectUser}
                 isLoadingNewOptions={isLoadingNewOptions}
             />
 

src/components/Search/SearchFiltersParticipantsSelector.tsx

@@ -10,8 +10,8 @@ import useOnyx from '@hooks/useOnyx';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import memoize from '@libs/memoize';
-import {filterAndOrderOptions, filterSelectedOptions, formatSectionsFromSearchTerm, getValidOptions} from '@libs/OptionsListUtils';
-import type {Option, Section} from '@libs/OptionsListUtils';
+import {filterAndOrderOptions, filterSelectedOptions, formatSectionsFromSearchTerm, getParticipantsOption, getPolicyExpenseReportOption, getValidOptions} from '@libs/OptionsListUtils';
+import type {Option} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {getDisplayNameForParticipant} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
@@ -41,7 +41,7 @@ type SearchFiltersParticipantsSelectorProps = {
 };
 
 function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}: SearchFiltersParticipantsSelectorProps) {
-    const {translate, formatPhoneNumber} = useLocalize();
+    const {translate, formatPhoneNumber, localeCompare} = useLocalize();
     const personalDetails = usePersonalDetails();
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
     const {options, areOptionsInitialized} = useOptionsList({
@@ -79,13 +79,28 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         );
     }, [areOptionsInitialized, options.reports, options.personalDetails, allPolicies, draftComments, nvpDismissedProductTraining, loginList, countryCode]);
 
+    const initialSelectedOptions = useMemo(() => {
+        if (!initialAccountIDs || initialAccountIDs.length === 0 || !personalDetails) {
+            return [];
+        }
+
+        const preSelectedOptions = initialAccountIDs.reduce<OptionData[]>((acc, accountID) => {
+            const participant = personalDetails[accountID];
+            if (participant) {
+                acc.push(getSelectedOptionData(participant));
+            }
+            return acc;
+        }, []);
+
+        return preSelectedOptions;
+    }, [initialAccountIDs, personalDetails]);
+
     const unselectedOptions = useMemo(() => {
         return filterSelectedOptions(defaultOptions, new Set(selectedOptions.map((option) => option.accountID)));
     }, [defaultOptions, selectedOptions]);
 
     const chatOptions = useMemo(() => {
         const filteredOptions = filterAndOrderOptions(unselectedOptions, cleanSearchTerm, countryCode, loginList, {
-            selectedOptions,
             excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
             maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
             canInviteUser: false,
@@ -99,10 +114,10 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         }
 
         return filteredOptions;
-    }, [unselectedOptions, cleanSearchTerm, countryCode, loginList, selectedOptions]);
+    }, [unselectedOptions, cleanSearchTerm, countryCode, loginList]);
 
     const {sections, headerMessage} = useMemo(() => {
-        const newSections: Section[] = [];
+        const sectionData: OptionData[] = [];
         if (!areOptionsInitialized) {
             return {sections: [], headerMessage: undefined};
         }
@@ -127,44 +142,62 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         }
 
         // If the current user is not selected, add them to the top of the list
-        if (!selectedCurrentUser && chatOptions.currentUserOption) {
+        if (!selectedCurrentUser && chatOptions.currentUserOption && !initialSelectedOptions.some((option) => option.accountID === chatOptions.currentUserOption?.accountID)) {
             const formattedName = getDisplayNameForParticipant({
                 accountID: chatOptions.currentUserOption.accountID,
                 shouldAddCurrentUserPostfix: true,
                 personalDetailsData: personalDetails,
                 formatPhoneNumber,
             });
             chatOptions.currentUserOption.text = formattedName;
-
-            newSections.push({
-                title: '',
-                data: [chatOptions.currentUserOption],
-                shouldShow: true,
-            });
+            sectionData.push(chatOptions.currentUserOption);
         }
 
-        newSections.push(formattedResults.section);
+        const selectedIDsSet = new Set(initialSelectedOptions.map((option) => option.accountID));
+        const unselectedFormattedSectionData = formattedResults.section.data.filter((option) => !selectedIDsSet.has(option.accountID));
+        if (unselectedFormattedSectionData.length) {
+            sectionData.push(...(unselectedFormattedSectionData as OptionData[]));
+        }
 
-        newSections.push({
-            title: '',
-            data: chatOptions.recentReports,
-            shouldShow: chatOptions.recentReports.length > 0,
-        });
+        const unselectedRecentReports = chatOptions.recentReports.filter((report) => !initialSelectedOptions.some((selectedOption) => selectedOption.accountID === report.accountID));
+        if (unselectedRecentReports) {
+            sectionData.push(...unselectedRecentReports);
+        }
 
-        newSections.push({
-            title: '',
-            data: chatOptions.personalDetails,
-            shouldShow: chatOptions.personalDetails.length > 0,
-        });
+        const unselectedPersonalDetails = chatOptions.personalDetails.filter((detail) => !initialSelectedOptions.some((selectedOption) => selectedOption.accountID === detail.accountID));
+        if (unselectedPersonalDetails) {
+            sectionData.push(...unselectedPersonalDetails);
+        }
 
         const noResultsFound = chatOptions.personalDetails.length === 0 && chatOptions.recentReports.length === 0 && !chatOptions.currentUserOption;
         const message = noResultsFound ? translate('common.noResultsFound') : undefined;
+        let sortedSectionData = sectionData.sort((a, b) => localeCompare(a?.login?.toLowerCase() ?? '', b?.login?.toLowerCase() ?? ''));
+
+        if (initialSelectedOptions.length && cleanSearchTerm === '') {
+            sortedSectionData = [
+                ...(initialSelectedOptions.map((participant) => {
+                    const participantData = {
+                        ...participant,
+                        selected: selectedOptions.some((selectedOption) => selectedOption.accountID === participant.accountID),
+                    };
+                    const isReportPolicyExpenseChat = participant.isPolicyExpenseChat ?? false;
+                    return isReportPolicyExpenseChat ? getPolicyExpenseReportOption(participantData, reportAttributesDerived) : getParticipantsOption(participantData, personalDetails);
+                }) as OptionData[]),
+                ...sortedSectionData,
+            ];
+        }
 
         return {
-            sections: newSections,
+            sections: [
+                {
+                    title: '',
+                    data: sortedSectionData,
+                    shouldShow: sortedSectionData.length > 0,
+                },
+            ],
             headerMessage: message,
         };
-    }, [areOptionsInitialized, cleanSearchTerm, selectedOptions, chatOptions, personalDetails, reportAttributesDerived, translate, formatPhoneNumber]);
+    }, [areOptionsInitialized, cleanSearchTerm, selectedOptions, chatOptions, personalDetails, reportAttributesDerived, initialSelectedOptions, translate, formatPhoneNumber, localeCompare]);
 
     const resetChanges = useCallback(() => {
         setSelectedOptions([]);

src/components/Search/SearchMultipleSelectionPicker.tsx

@@ -34,46 +34,47 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
     }, [initiallySelectedItems]);
 
     const {sections, noResultsFound} = useMemo(() => {
-        const selectedItemsSection = selectedItems
-            .filter((item) => item?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
-            .sort((a, b) => sortOptionsWithEmptyValue(a.value.toString(), b.value.toString(), localeCompare))
-            .map((item) => ({
-                text: item.name,
-                keyForList: item.name,
-                isSelected: true,
-                value: item.value,
-            }));
-        const remainingItemsSection = items
-            .filter(
-                (item) =>
-                    !selectedItems.some((selectedItem) => selectedItem.value.toString() === item.value.toString()) && item?.name?.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()),
-            )
-            .sort((a, b) => sortOptionsWithEmptyValue(a.value.toString(), b.value.toString(), localeCompare))
-            .map((item) => ({
+        const filteredItems = items.filter((item) => item.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()));
+
+        const initialValues = new Set(initiallySelectedItems?.map((item) => item.value.toString()) ?? []);
+        const selectedValues = new Set(selectedItems.map((item) => item.value.toString()));
+
+        const initialItems: Array<{text: string; keyForList: string; isSelected: boolean; value: string | string[]}> = [];
+        const remainingItems: Array<{text: string; keyForList: string; isSelected: boolean; value: string | string[]}> = [];
+
+        const sortedItems = filteredItems.sort((a, b) => sortOptionsWithEmptyValue(a.value.toString(), b.value.toString(), localeCompare));
+
+        for (const item of sortedItems) {
+            const mapped = {
                 text: item.name,
                 keyForList: item.name,
-                isSelected: false,
+                isSelected: selectedValues.has(item.value.toString()),
                 value: item.value,
-            }));
-        const isEmpty = !selectedItemsSection.length && !remainingItemsSection.length;
+            };
+            if (!initialValues.size || !initialValues.has(item.value.toString())) {
+                remainingItems.push(mapped);
+            } else {
+                initialItems.push(mapped);
+            }
+        }
+
+        const shouldReorder = !debouncedSearchTerm.trim() && initialItems.length > 0;
+        const data = shouldReorder ? [...initialItems, ...remainingItems] : [...initialItems, ...remainingItems];
+
+        const isEmpty = data.length === 0;
         return {
             sections: isEmpty
                 ? []
                 : [
-                      {
-                          title: undefined,
-                          data: selectedItemsSection,
-                          shouldShow: selectedItemsSection.length > 0,
-                      },
                       {
                           title: pickerTitle,
-                          data: remainingItemsSection,
-                          shouldShow: remainingItemsSection.length > 0,
+                          data,
+                          shouldShow: true,
                       },
                   ],
             noResultsFound: isEmpty,
         };
-    }, [selectedItems, items, pickerTitle, debouncedSearchTerm, localeCompare]);
+    }, [selectedItems, items, pickerTitle, debouncedSearchTerm, localeCompare, initiallySelectedItems]);
 
     const onSelectItem = useCallback(
         (item: Partial<OptionData & SearchMultipleSelectionPickerItem>) => {