Merge pull request #38276 from dukenv0307/fix/34301

Fix member search input does not display in invite search input
Expensify · Mar 14, 2024 · 7b1cc3b · 7b1cc3b
2 parents 206d293 + e1fc0b2
commit 7b1cc3b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx
@@ -32,6 +32,7 @@ import type {PersonalDetailsList, Policy} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
+import SearchInputManager from './workspace/SearchInputManager';
 
 type RoomInvitePageOnyxProps = {
     /** All of the personal details for everyone */
@@ -52,6 +53,10 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const navigation: StackNavigationProp<RootStackParamList> = useNavigation();
 
+    useEffect(() => {
+        setSearchTerm(SearchInputManager.searchInput);
+    }, []);
+
     // Any existing participants and Expensify emails should not be eligible for invitation
     const excludedUsers = useMemo(
         () =>
@@ -187,6 +192,7 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa
         if (reportID) {
             Report.inviteToRoom(reportID, invitedEmailsToAccountIDs);
         }
+        SearchInputManager.searchInput = '';
         Navigation.navigate(backRoute);
     }, [selectedOptions, backRoute, reportID, validate]);
 
@@ -231,7 +237,10 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa
                     ListItem={UserListItem}
                     textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                     textInputValue={searchTerm}
-                    onChangeText={setSearchTerm}
+                    onChangeText={(value) => {
+                        SearchInputManager.searchInput = value;
+                        setSearchTerm(value);
+                    }}
                     headerMessage={headerMessage}
                     onSelectRow={toggleOption}
                     onConfirm={inviteUsers}

diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
@@ -35,6 +36,7 @@ import type {Session} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
+import SearchInputManager from './workspace/SearchInputManager';
 
 type RoomMembersPageOnyxProps = {
     session: OnyxEntry<Session>;
@@ -54,6 +56,19 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
     const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false);
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
+    const isFocusedScreen = useIsFocused();
+
+    useEffect(() => {
+        setSearchValue(SearchInputManager.searchInput);
+    }, [isFocusedScreen]);
+
+    useEffect(
+        () => () => {
+            SearchInputManager.searchInput = '';
+        },
+        [],
+    );
+
     /**
      * Get members for the current room
      */
@@ -274,7 +289,10 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
                             textInputLabel={translate('optionsSelector.findMember')}
                             disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                             textInputValue={searchValue}
-                            onChangeText={setSearchValue}
+                            onChangeText={(value) => {
+                                SearchInputManager.searchInput = value;
+                                setSearchValue(value);
+                            }}
                             headerMessage={headerMessage}
                             onSelectRow={(item) => toggleUser(item)}
                             onSelectAll={() => toggleAllUsers(data)}