Merge pull request #32542 from DylanDylann/fix/22534-web-search-term-…

…in-workspacememberpage-lost Fix: Search term is lost
Expensify · Dec 6, 2023 · 395830a · 395830a
2 parents 2e8cfdb + d180ba9
commit 395830a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -13,6 +13,7 @@ import type {AuthScreensParamList} from '@navigation/types';
 import DemoSetupPage from '@pages/DemoSetupPage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
+import SearchInputManager from '@pages/workspace/SearchInputManager';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Download from '@userActions/Download';
@@ -123,6 +124,8 @@ const modalScreenListeners = {
         Modal.setModalVisibility(true);
     },
     beforeRemove: () => {
+        // Clear search input (WorkspaceInvitePage) when modal is closed
+        SearchInputManager.searchInput = '';
         Modal.setModalVisibility(false);
     },
 };

diff --git a/src/pages/workspace/SearchInputManager.js b/src/pages/workspace/SearchInputManager.js
@@ -0,0 +1,5 @@
+// eslint-disable-next-line prefer-const
+let searchInput = '';
+export default {
+    searchInput,
+};
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
@@ -21,6 +21,7 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SearchInputManager from './SearchInputManager';
 import {policyDefaultProps, policyPropTypes} from './withPolicy';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -75,6 +76,13 @@ function WorkspaceInvitePage(props) {
         Policy.openWorkspaceInvitePage(props.route.params.policyID, _.keys(policyMemberEmailsToAccountIDs));
     };
 
+    useEffect(() => {
+        if (!SearchInputManager.searchInput) {
+            return;
+        }
+        setSearchTerm(SearchInputManager.searchInput);
+    }, []);
+
     useEffect(() => {
         Policy.clearErrors(props.route.params.policyID);
         openWorkspaceInvitePage();
@@ -255,7 +263,10 @@ function WorkspaceInvitePage(props) {
                             sections={sections}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             textInputValue={searchTerm}
-                            onChangeText={setSearchTerm}
+                            onChangeText={(value) => {
+                                SearchInputManager.searchInput = value;
+                                setSearchTerm(value);
+                            }}
                             headerMessage={headerMessage}
                             onSelectRow={toggleOption}
                             onConfirm={inviteUser}

diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -32,6 +33,7 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SearchInputManager from './SearchInputManager';
 import {policyDefaultProps, policyPropTypes} from './withPolicy';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -85,6 +87,17 @@ function WorkspaceMembersPage(props) {
     const isOfflineAndNoMemberDataAvailable = _.isEmpty(props.policyMembers) && props.network.isOffline;
     const prevPersonalDetails = usePrevious(props.personalDetails);
 
+    const isFocusedScreen = useIsFocused();
+
+    useEffect(() => {
+        if (!SearchInputManager.searchInput) {
+            return;
+        }
+        setSearchValue(SearchInputManager.searchInput);
+    }, [isFocusedScreen]);
+
+    useEffect(() => () => (SearchInputManager.searchInput = ''), []);
+
     /**
      * Get filtered personalDetails list with current policyMembers
      * @param {Object} policyMembers
@@ -466,7 +479,10 @@ function WorkspaceMembersPage(props) {
                             sections={[{data, indexOffset: 0, isDisabled: false}]}
                             textInputLabel={props.translate('optionsSelector.findMember')}
                             textInputValue={searchValue}
-                            onChangeText={setSearchValue}
+                            onChangeText={(value) => {
+                                SearchInputManager.searchInput = value;
+                                setSearchValue(value);
+                            }}
                             headerMessage={getHeaderMessage()}
                             headerContent={getHeaderContent()}
                             onSelectRow={(item) => toggleUser(item.accountID)}