Merge pull request #27497 from dukenv0307/fix/26955

fix: Web - Members page search bar does not get focused
Expensify · 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>