diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index ebb95475bcd..7bd3c7f1901 100644 --- 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 && ( { + 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 && ( diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js index 96c2f63eb09..0d7a60e78a1 100644 --- 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 index 319099a9e1c..8fd5f8b1681 100644 --- 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(); + }) + } /> @@ -403,6 +413,8 @@ function WorkspaceMembersPage(props) { onDismissError={dismissError} showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)} showScrollIndicator + shouldFocusOnSelectRow={!Browser.isMobile()} + inputRef={textInputRef} />