Merge pull request Expensify#27497 from dukenv0307/fix/26955

fix: Web - Members page search bar does not get focused
ishpaul777 · Oct 2, 2023 · 7dc923e · 7dc923e
2 parents 30d7108 + c5c8206
commit 7dc923e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -52,7 +52,9 @@ function BaseSelectionList({
     showScrollIndicator = false,
     showLoadingPlaceholder = false,
     showConfirmButton = false,
+    shouldFocusOnSelectRow = false,
     isKeyboardShown = false,
+    inputRef = null,
     disableKeyboardShortcuts = false,
     children,
 }) {
@@ -65,7 +67,6 @@ function BaseSelectionList({
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
     const isFocused = useIsFocused();
-
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -209,6 +210,17 @@ function BaseSelectionList({
         }
 
         onSelectRow(item);
+
+        if (shouldShowTextInput && shouldFocusOnSelectRow && textInputRef.current) {
+            textInputRef.current.focus();
+        }
+    };
+
+    const selectAllRow = () => {
+        onSelectAll();
+        if (shouldShowTextInput && shouldFocusOnSelectRow && textInputRef.current) {
+            textInputRef.current.focus();
+        }
     };
 
     const selectFocusedOption = () => {
@@ -349,7 +361,13 @@ function BaseSelectionList({
                         {shouldShowTextInput && (
                             <View style={[styles.ph5, styles.pb3]}>
                                 <TextInput
-                                    ref={textInputRef}
+                                    ref={(el) => {
+                                        if (inputRef) {
+                                            // eslint-disable-next-line no-param-reassign
+                                            inputRef.current = el;
+                                        }
+                                        textInputRef.current = el;
+                                    }}
                                     label={textInputLabel}
                                     accessibilityLabel={textInputLabel}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
@@ -376,7 +394,7 @@ function BaseSelectionList({
                                 {!headerMessage && canSelectMultiple && shouldShowSelectAll && (
                                     <PressableWithFeedback
                                         style={[styles.peopleRow, styles.userSelectNone, styles.ph5, styles.pb3]}
-                                        onPress={onSelectAll}
+                                        onPress={selectAllRow}
                                         accessibilityLabel={translate('workspace.people.selectAll')}
                                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                         accessibilityState={{checked: flattenedSections.allSelected}}
@@ -386,7 +404,7 @@ function BaseSelectionList({
                                         <Checkbox
                                             accessibilityLabel={translate('workspace.people.selectAll')}
                                             isChecked={flattenedSections.allSelected}
-                                            onPress={onSelectAll}
+                                            onPress={selectAllRow}
                                             disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
                                         />
                                         <View style={[styles.flex1]}>

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
@@ -167,6 +167,12 @@ const propTypes = {
     /** Whether to show the default confirm button */
     showConfirmButton: PropTypes.bool,
 
+    /** Whether to focus the textinput after an option is selected */
+    shouldFocusOnSelectRow: PropTypes.bool,
+
+    /** A ref to forward to the TextInput */
+    inputRef: PropTypes.oneOfType([PropTypes.object]),
+
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };

diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
@@ -1,7 +1,7 @@
-import React, {useCallback, useEffect, useState, useMemo} from 'react';
+import React, {useCallback, useEffect, useState, useMemo, useRef} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
@@ -31,6 +31,7 @@ import Log from '../../libs/Log';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
 import SelectionList from '../../components/SelectionList';
 import Text from '../../components/Text';
+import * as Browser from '../../libs/Browser';
 
 const propTypes = {
     /** All personal details asssociated with user */
@@ -77,6 +78,7 @@ function WorkspaceMembersPage(props) {
     const prevIsOffline = usePrevious(props.network.isOffline);
     const accountIDs = useMemo(() => _.keys(props.policyMembers), [props.policyMembers]);
     const prevAccountIDs = usePrevious(accountIDs);
+    const textInputRef = useRef(null);
 
     /**
      * Get members for the current workspace
@@ -372,6 +374,14 @@ function WorkspaceMembersPage(props) {
                     prompt={props.translate('workspace.people.removeMembersPrompt')}
                     confirmText={props.translate('common.remove')}
                     cancelText={props.translate('common.cancel')}
+                    onModalHide={() =>
+                        InteractionManager.runAfterInteractions(() => {
+                            if (!textInputRef.current) {
+                                return;
+                            }
+                            textInputRef.current.focus();
+                        })
+                    }
                 />
                 <View style={[styles.w100, styles.flex1]}>
                     <View style={[styles.w100, styles.flexRow, styles.pt3, styles.ph5]}>
@@ -403,6 +413,8 @@ function WorkspaceMembersPage(props) {
                             onDismissError={dismissError}
                             showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)}
                             showScrollIndicator
+                            shouldFocusOnSelectRow={!Browser.isMobile()}
+                            inputRef={textInputRef}
                         />
                     </View>
                 </View>