Stop scrolling to top when selecting an item

src/components/Search/SearchFiltersChatsSelector.tsx

@@ -9,10 +9,11 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
-import {createOptionFromReport, filterAndOrderOptions, formatSectionsFromSearchTerm, getAlternateText, getSearchOptions} from '@libs/OptionsListUtils';
+import {createOptionFromReport, filterAndOrderOptions, getAlternateText, getFirstSelectedItem, getSearchOptions} from '@libs/OptionsListUtils';
 import type {Option, Section} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import {searchInServer} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -67,61 +68,44 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
         return getSearchOptions(options, undefined, false);
     }, [areOptionsInitialized, isScreenTransitionEnd, options]);
 
+    const defaultOptionsModified = useMemo(() => {
+        return {
+            ...defaultOptions,
+            recentReports: defaultOptions.recentReports.map((item) => (selectedReportIDs.includes(item.reportID) ? {...item, isSelected: true} : item)),
+        };
+    }, [defaultOptions, selectedReportIDs]);
+
     const chatOptions = useMemo(() => {
-        return filterAndOrderOptions(defaultOptions, cleanSearchTerm, {
+        return filterAndOrderOptions(defaultOptionsModified, cleanSearchTerm, {
             selectedOptions,
             excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
         });
-    }, [defaultOptions, cleanSearchTerm, selectedOptions]);
+    }, [cleanSearchTerm, selectedOptions, defaultOptionsModified]);
 
-    const {sections, headerMessage} = useMemo(() => {
+    const {sections, headerMessage, firstKeyForList} = useMemo(() => {
         const newSections: Section[] = [];
+        let firstKey = '';
         if (!areOptionsInitialized) {
-            return {sections: [], headerMessage: undefined};
+            return {sections: [], headerMessage: undefined, firstKeyForList: firstKey};
         }
 
-        const formattedResults = formatSectionsFromSearchTerm(
-            cleanSearchTerm,
-            selectedOptions,
-            chatOptions.recentReports,
-            chatOptions.personalDetails,
-            personalDetails,
-            false,
-            undefined,
-            reportAttributesDerived,
-        );
-
-        newSections.push(formattedResults.section);
-
-        const visibleReportsWhenSearchTermNonEmpty = chatOptions.recentReports.map((report) => (selectedReportIDs.includes(report.reportID) ? getSelectedOptionData(report) : report));
-        const visibleReportsWhenSearchTermEmpty = chatOptions.recentReports.filter((report) => !selectedReportIDs.includes(report.reportID));
-        const reportsFiltered = cleanSearchTerm === '' ? visibleReportsWhenSearchTermEmpty : visibleReportsWhenSearchTermNonEmpty;
-
         newSections.push({
             title: undefined,
-            data: reportsFiltered,
+            data: chatOptions.recentReports,
             shouldShow: chatOptions.recentReports.length > 0,
         });
-
-        const areResultsFound = didScreenTransitionEnd && formattedResults.section.data.length === 0 && reportsFiltered.length === 0;
+        if (!firstKey) {
+            firstKey = getFirstSelectedItem(chatOptions.recentReports);
+        }
+        const areResultsFound = didScreenTransitionEnd && chatOptions.recentReports.length === 0;
         const message = areResultsFound ? translate('common.noResultsFound') : undefined;
 
         return {
             sections: newSections,
             headerMessage: message,
+            firstKeyForList: firstKey,
         };
-    }, [
-        areOptionsInitialized,
-        chatOptions.personalDetails,
-        chatOptions.recentReports,
-        cleanSearchTerm,
-        didScreenTransitionEnd,
-        personalDetails,
-        reportAttributesDerived,
-        selectedOptions,
-        selectedReportIDs,
-        translate,
-    ]);
+    }, [areOptionsInitialized, chatOptions.recentReports, didScreenTransitionEnd, translate]);
 
     useEffect(() => {
         searchInServer(debouncedSearchTerm.trim());
@@ -180,6 +164,8 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
             onSelectRow={handleParticipantSelection}
             isLoadingNewOptions={isLoadingNewOptions}
             showLoadingPlaceholder={showLoadingPlaceholder}
+            initiallyFocusedOptionKey={firstKeyForList}
+            getItemHeight={() => variables.optionRowHeight}
         />
     );
 }

src/components/Search/SearchFiltersParticipantsSelector.tsx

@@ -8,11 +8,11 @@ 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 {filterAndOrderOptions, getFirstSelectedItem, getValidOptions} from '@libs/OptionsListUtils';
 import type {Option, Section} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
-import {getDisplayNameForParticipant} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -46,7 +46,6 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
         shouldInitialize: didScreenTransitionEnd,
     });
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {canBeMissing: false, initWithStoredValues: false});
-    const [reportAttributesDerived] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES, {canBeMissing: true, selector: (val) => val?.reports});
     const [selectedOptions, setSelectedOptions] = useState<OptionData[]>([]);
     const [searchTerm, setSearchTerm] = useState('');
     const cleanSearchTerm = useMemo(() => searchTerm.trim().toLowerCase(), [searchTerm]);
@@ -64,95 +63,65 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
             {
                 excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
                 includeCurrentUser: true,
+                includeSelectedOptions: true,
             },
         );
     }, [areOptionsInitialized, options.personalDetails, options.reports]);
-
-    const unselectedOptions = useMemo(() => {
-        return filterSelectedOptions(defaultOptions, new Set(selectedOptions.map((option) => option.accountID)));
-    }, [defaultOptions, selectedOptions]);
+    const selectedAccountIDsSet = useMemo(() => new Set(selectedOptions.map(({accountID}) => accountID)), [selectedOptions]);
+    const defaultOptionsModified = useMemo(() => {
+        return {
+            ...defaultOptions,
+            recentReports: defaultOptions.recentReports.map((item) => (selectedAccountIDsSet.has(item.accountID) ? {...item, isSelected: true} : item)),
+            personalDetails: defaultOptions.personalDetails.map((item) => (selectedAccountIDsSet.has(item.accountID) ? {...item, isSelected: true} : item)),
+        };
+    }, [defaultOptions, selectedAccountIDsSet]);
 
     const chatOptions = useMemo(() => {
-        const filteredOptions = filterAndOrderOptions(unselectedOptions, cleanSearchTerm, {
+        const filteredOptions = filterAndOrderOptions(defaultOptionsModified, cleanSearchTerm, {
             selectedOptions,
             excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
             maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
             canInviteUser: false,
         });
 
-        const {currentUserOption} = unselectedOptions;
-
-        // Ensure current user is not in personalDetails when they should be excluded
-        if (currentUserOption) {
-            filteredOptions.personalDetails = filteredOptions.personalDetails.filter((detail) => detail.accountID !== currentUserOption.accountID);
-        }
-
         return filteredOptions;
-    }, [unselectedOptions, cleanSearchTerm, selectedOptions]);
+    }, [defaultOptionsModified, cleanSearchTerm, selectedOptions]);
 
-    const {sections, headerMessage} = useMemo(() => {
+    const {sections, headerMessage, firstKeyForList} = useMemo(() => {
         const newSections: Section[] = [];
-        if (!areOptionsInitialized) {
-            return {sections: [], headerMessage: undefined};
-        }
-
-        const formattedResults = formatSectionsFromSearchTerm(
-            cleanSearchTerm,
-            selectedOptions,
-            chatOptions.recentReports,
-            chatOptions.personalDetails,
-            personalDetails,
-            true,
-            undefined,
-            reportAttributesDerived,
-        );
-
-        const selectedCurrentUser = formattedResults.section.data.find((option) => option.accountID === chatOptions.currentUserOption?.accountID);
+        let firstKey = '';
 
-        // If the current user is already selected, remove them from the recent reports and personal details
-        if (selectedCurrentUser) {
-            chatOptions.recentReports = chatOptions.recentReports.filter((report) => report.accountID !== selectedCurrentUser.accountID);
-            chatOptions.personalDetails = chatOptions.personalDetails.filter((detail) => detail.accountID !== selectedCurrentUser.accountID);
-        }
-
-        // If the current user is not selected, add them to the top of the list
-        if (!selectedCurrentUser && chatOptions.currentUserOption) {
-            const formattedName = getDisplayNameForParticipant({
-                accountID: chatOptions.currentUserOption.accountID,
-                shouldAddCurrentUserPostfix: true,
-                personalDetailsData: personalDetails,
-            });
-            chatOptions.currentUserOption.text = formattedName;
-
-            newSections.push({
-                title: '',
-                data: [chatOptions.currentUserOption],
-                shouldShow: true,
-            });
+        if (!areOptionsInitialized) {
+            return {sections: [], headerMessage: undefined, firstKeyForList: firstKey};
         }
 
-        newSections.push(formattedResults.section);
-
         newSections.push({
             title: '',
             data: chatOptions.recentReports,
             shouldShow: chatOptions.recentReports.length > 0,
         });
+        if (!firstKey) {
+            firstKey = getFirstSelectedItem(chatOptions.recentReports);
+        }
 
         newSections.push({
             title: '',
             data: chatOptions.personalDetails,
             shouldShow: chatOptions.personalDetails.length > 0,
         });
+        if (!firstKey) {
+            firstKey = getFirstSelectedItem(chatOptions.personalDetails);
+        }
 
         const noResultsFound = chatOptions.personalDetails.length === 0 && chatOptions.recentReports.length === 0 && !chatOptions.currentUserOption;
         const message = noResultsFound ? translate('common.noResultsFound') : undefined;
 
         return {
             sections: newSections,
             headerMessage: message,
+            firstKeyForList: firstKey,
         };
-    }, [areOptionsInitialized, cleanSearchTerm, selectedOptions, chatOptions, personalDetails, reportAttributesDerived, translate]);
+    }, [areOptionsInitialized, chatOptions, translate]);
 
     const resetChanges = useCallback(() => {
         setSelectedOptions([]);
@@ -195,10 +164,6 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
                     return true;
                 }
 
-                if (selectedOption.reportID && selectedOption.reportID === option?.reportID) {
-                    return true;
-                }
-
                 return false;
             });
 
@@ -242,6 +207,8 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate}:
             onSelectRow={handleParticipantSelection}
             isLoadingNewOptions={isLoadingNewOptions}
             showLoadingPlaceholder={showLoadingPlaceholder}
+            initiallyFocusedOptionKey={firstKeyForList}
+            getItemHeight={() => variables.optionRowHeightCompact}
         />
     );
 }

src/components/Search/SearchMultipleSelectionPicker.tsx

@@ -4,8 +4,10 @@ import MultiSelectListItem from '@components/SelectionList/MultiSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
+import {getFirstSelectedItem} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {sortOptionsWithEmptyValue} from '@libs/SearchQueryUtils';
+import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
 import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
 
@@ -33,47 +35,32 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
     }, [initiallySelectedItems]);
 
     const {sections, noResultsFound} = useMemo(() => {
-        const selectedItemsSection = selectedItems
-            .filter((item) => item?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
+        const itemsSection = items
+            .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,
+                isSelected: selectedItems.some((selectedItem) => selectedItem.value === item.value),
                 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) => ({
-                text: item.name,
-                keyForList: item.name,
-                isSelected: false,
-                value: item.value,
-            }));
-        const isEmpty = !selectedItemsSection.length && !remainingItemsSection.length;
+        const isEmpty = !itemsSection.length;
         return {
             sections: isEmpty
                 ? []
                 : [
-                      {
-                          title: undefined,
-                          data: selectedItemsSection,
-                          shouldShow: selectedItemsSection.length > 0,
-                      },
                       {
                           title: pickerTitle,
-                          data: remainingItemsSection,
-                          shouldShow: remainingItemsSection.length > 0,
+                          data: itemsSection,
+                          shouldShow: itemsSection.length > 0,
                       },
                   ],
             noResultsFound: isEmpty,
         };
     }, [selectedItems, items, pickerTitle, debouncedSearchTerm, localeCompare]);
 
+    const firstKey = getFirstSelectedItem(sections?.at(0)?.data);
+
     const onSelectItem = useCallback(
         (item: Partial<OptionData & SearchMultipleSelectionPickerItem>) => {
             if (!item.text || !item.keyForList || !item.value) {
@@ -120,6 +107,8 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
             shouldShowTooltips
             canSelectMultiple
             ListItem={MultiSelectListItem}
+            initiallyFocusedOptionKey={firstKey}
+            getItemHeight={() => variables.optionRowHeightCompact}
         />
     );
 }