fix: visual glitches

Author: mkzie2

src/components/Search/FilterDropdowns/UserSelectPopup.tsx

@@ -14,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import {getParticipantsOption} from '@libs/OptionsListUtils';
+import {doesPersonalDetailMatchSearchTerm} from '@libs/OptionsListUtils/searchMatchUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -103,9 +104,11 @@ function UserSelectPopup({value, label, closeOverlay, onChange, isSearchable}: U
             if (currentUserPersonalDetail) {
                 currentUserOption = currentUserPersonalDetail;
             } else if (personalDetails?.[currentUserAccountID]) {
-                currentUserOption = {
-                    ...getParticipantsOption(personalDetails[currentUserAccountID], personalDetails),
-                } as OptionData;
+                const candidateOption = getParticipantsOption(personalDetails[currentUserAccountID], personalDetails) as OptionData;
+                const trimmedSearchTerm = debouncedSearchTerm.trim().toLowerCase();
+                if (!trimmedSearchTerm || doesPersonalDetailMatchSearchTerm(candidateOption, currentUserAccountID, trimmedSearchTerm)) {
+                    currentUserOption = candidateOption;
+                }
             }
         }
 
@@ -141,7 +144,7 @@ function UserSelectPopup({value, label, closeOverlay, onChange, isSearchable}: U
             keyForList: option.keyForList ?? option.login ?? '',
         }));
         return combinedOptionsWithKeyForList;
-    }, [availableOptions.personalDetails, availableOptions.recentReports, selectedOptionsForDisplay, currentUserAccountID, personalDetails]);
+    }, [availableOptions.personalDetails, availableOptions.recentReports, selectedOptionsForDisplay, currentUserAccountID, personalDetails, debouncedSearchTerm]);
 
     const headerMessage = useMemo(() => {
         const noResultsFound = isEmpty(listData);

src/components/Search/SearchFiltersParticipantsSelector.tsx

@@ -11,6 +11,7 @@ import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionS
 import useSearchSelector from '@hooks/useSearchSelector';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {formatSectionsFromSearchTerm, getFilteredRecentAttendees, getParticipantsOption} from '@libs/OptionsListUtils';
+import {doesPersonalDetailMatchSearchTerm} from '@libs/OptionsListUtils/searchMatchUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import {getDisplayNameForParticipant} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
@@ -76,18 +77,19 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate,
         [personalDetails, recentAttendees, currentUserEmail, currentUserAccountID, shouldAllowNameOnlyOptions],
     );
 
-    const {searchTerm, setSearchTerm, availableOptions, selectedOptions, setSelectedOptions, toggleSelection, areOptionsInitialized, onListEndReached} = useSearchSelector({
-        selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
-        searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_GENERAL,
-        maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
-        includeUserToInvite: true,
-        excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
-        includeRecentReports: true,
-        shouldInitialize: didScreenTransitionEnd,
-        includeCurrentUser: true,
-        recentAttendees: recentAttendeeLists,
-        shouldAllowNameOnlyOptions,
-    });
+    const {searchTerm, debouncedSearchTerm, setSearchTerm, availableOptions, selectedOptions, setSelectedOptions, toggleSelection, areOptionsInitialized, onListEndReached} =
+        useSearchSelector({
+            selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
+            searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_GENERAL,
+            maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
+            includeUserToInvite: true,
+            excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
+            includeRecentReports: true,
+            shouldInitialize: didScreenTransitionEnd,
+            includeCurrentUser: true,
+            recentAttendees: recentAttendeeLists,
+            shouldAllowNameOnlyOptions,
+        });
 
     const {sections, headerMessage} = useMemo(() => {
         const newSections = [];
@@ -104,7 +106,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate,
         }
 
         const formattedResults = formatSectionsFromSearchTerm(
-            searchTerm.trim().toLowerCase(),
+            debouncedSearchTerm.trim().toLowerCase(),
             selectedOptions,
             chatOptions.recentReports,
             chatOptions.personalDetails,
@@ -116,7 +118,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate,
             undefined,
             reportAttributesDerived,
         );
-        const selectedCurrentUser = formattedResults.section.data.find((option) => option.accountID === chatOptions.currentUserOption?.accountID);
+        const selectedCurrentUser = formattedResults.section.data.find((option) => option.accountID === currentUserAccountID);
 
         // If the current user is already selected, remove them from the recent reports and personal details
         if (selectedCurrentUser) {
@@ -128,12 +130,13 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate,
         // Falls back to creating from personal details to handle pagination edge cases
         if (!selectedCurrentUser) {
             let currentUserOptionToShow = chatOptions.currentUserOption;
-
-            // Fallback: create current user option from personalDetails if not in paginated results
-            if (!currentUserOptionToShow && currentUserAccountID && personalDetails?.[currentUserAccountID]) {
-                currentUserOptionToShow = {
-                    ...getParticipantsOption(personalDetails[currentUserAccountID], personalDetails),
-                } as OptionData;
+            const currentUserDetails = currentUserAccountID ? personalDetails?.[currentUserAccountID] : undefined;
+            if (!currentUserOptionToShow && currentUserAccountID && currentUserDetails) {
+                const candidateOption = getParticipantsOption(currentUserDetails, personalDetails) as OptionData;
+                const trimmedSearchTerm = debouncedSearchTerm.trim().toLowerCase();
+                if (!trimmedSearchTerm || doesPersonalDetailMatchSearchTerm(candidateOption, currentUserAccountID, trimmedSearchTerm)) {
+                    currentUserOptionToShow = candidateOption;
+                }
             }
 
             if (currentUserOptionToShow) {
@@ -187,7 +190,7 @@ function SearchFiltersParticipantsSelector({initialAccountIDs, onFiltersUpdate,
     }, [
         areOptionsInitialized,
         availableOptions,
-        searchTerm,
+        debouncedSearchTerm,
         selectedOptions,
         privateIsArchivedMap,
         currentUserAccountID,