Fix issue with option disappearing when selected for new contacts

src/pages/NewChatPage.js

@@ -3,6 +3,7 @@ import React, {useState, useEffect, useMemo, useCallback} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import OptionsSelector from '../components/OptionsSelector';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import Permissions from '../libs/Permissions';
@@ -71,7 +72,9 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
         const sectionsList = [];
         let indexOffset = 0;
 
-        // Only show the selected participants if the search is empty
+        // We show the selected participants at the top of the list when there is no search term
+        // However, if there is a search term we remove the selected participants from the top of the list unless they are part of the search results
+        // This clears up space on mobile views, where if you create a group with 4+ people you can't see the selected participants and the search results at the same time
         if (searchTerm === '') {
             sectionsList.push({
                 title: undefined,
@@ -80,6 +83,24 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                 indexOffset,
             });
             indexOffset += selectedOptions.length;
+        } else {
+            // If you select a new user you don't have a contact for, they won't get returned as part of a recent report or personal details
+            // This will add them to the list of options, deduping them if they already exist in the other lists
+            const selectedParticipantsWithoutDetails = _.filter(selectedOptions, (participant) => {
+                const accountID = lodashGet(participant, 'accountID', null);
+                const isPartOfSearchTerm = participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase());
+                const isReportInRecentReports = _.some(filteredRecentReports, (report) => report.accountID === accountID);
+                const isReportInPersonalDetails = _.some(filteredPersonalDetails, (personalDetail) => personalDetail.accountID === accountID);
+                return isPartOfSearchTerm && !isReportInRecentReports && !isReportInPersonalDetails;
+            });
+
+            sectionsList.push({
+                title: undefined,
+                data: selectedParticipantsWithoutDetails,
+                shouldShow: !_.isEmpty(selectedParticipantsWithoutDetails),
+                indexOffset,
+            });
+            indexOffset += selectedParticipantsWithoutDetails.length;
         }
 
         if (maxParticipantsReached) {

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

@@ -104,7 +104,9 @@ function MoneyRequestParticipantsSelector({
         const newSections = [];
         let indexOffset = 0;
 
-        // Only show the selected participants if the search is empty
+        // We show the selected participants at the top of the list when there is no search term
+        // However, if there is a search term we remove the selected participants from the top of the list unless they are part of the search results
+        // This clears up space on mobile views, where if you split with 4+ people you can't see the selected participants and the search results at the same time
         if (searchTerm === '') {
             newSections.push({
                 title: undefined,
@@ -116,6 +118,27 @@ function MoneyRequestParticipantsSelector({
                 indexOffset,
             });
             indexOffset += participants.length;
+        } else {
+            // If you select a new user you don't have a contact for, they won't get returned as part of a recent report or personal details
+            // This will add them to the list of options, deduping them if they already exist in the other lists
+            const selectedParticipantsWithoutDetails = _.filter(participants, (participant) => {
+                const accountID = lodashGet(participant, 'accountID', null);
+                const isPartOfSearchTerm = participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase());
+                const isReportInRecentReports = _.some(newChatOptions.recentReports, (report) => report.accountID === accountID);
+                const isReportInPersonalDetails = _.some(newChatOptions.personalDetails, (personalDetail) => personalDetail.accountID === accountID);
+                return isPartOfSearchTerm && !isReportInRecentReports && !isReportInPersonalDetails;
+            });
+
+            newSections.push({
+                title: undefined,
+                data: _.map(selectedParticipantsWithoutDetails, (participant) => {
+                    const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
+                    return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
+                }),
+                shouldShow: !_.isEmpty(selectedParticipantsWithoutDetails),
+                indexOffset,
+            });
+            indexOffset += selectedParticipantsWithoutDetails.length;
         }
 
         if (maxParticipantsReached) {