Fix auto focus in SelectionList

src/components/CountryPicker/CountrySelectorModal.js

@@ -81,7 +81,6 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                     sections={[{data: searchResults, indexOffset: 0}]}
                     onSelectRow={onCountrySelected}
                     onChangeText={setSearchValue}
-                    shouldDelayFocus
                     initiallyFocusedOptionKey={currentCountry}
                 />
             </ScreenWrapper>

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -70,7 +70,6 @@ function YearPickerModal(props) {
                     onBackButtonPress={props.onClose}
                 />
                 <SelectionList
-                    shouldDelayFocus
                     textInputLabel={translate('yearPickerPage.selectYear')}
                     textInputValue={searchText}
                     textInputMaxLength={4}

src/components/SelectionList/BaseSelectionList.js

@@ -1,7 +1,8 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useMemo, useRef, useState, useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {useFocusEffect} from '@react-navigation/native';
 import SectionList from '../SectionList';
 import Text from '../Text';
 import styles from '../../styles/styles';
@@ -42,7 +43,6 @@ function BaseSelectionList({
     keyboardType = CONST.KEYBOARD_TYPE.DEFAULT,
     onChangeText,
     initiallyFocusedOptionKey = '',
-    shouldDelayFocus = false,
     onScroll,
     onScrollBeginDrag,
     headerMessage = '',
@@ -266,23 +266,20 @@ function BaseSelectionList({
         );
     };
 
-    /** Focuses the text input when the component mounts. If `props.shouldDelayFocus` is true, we wait for the animation to finish */
-    useEffect(() => {
-        if (shouldShowTextInput) {
-            if (shouldDelayFocus) {
+    /** Focuses the text input when the component comes into focus and after any navigation animations finish. */
+    useFocusEffect(
+        useCallback(() => {
+            if (shouldShowTextInput) {
                 focusTimeoutRef.current = setTimeout(() => textInputRef.current.focus(), CONST.ANIMATED_TRANSITION);
-            } else {
-                textInputRef.current.focus();
-            }
-        }
-
-        return () => {
-            if (!focusTimeoutRef.current) {
-                return;
             }
-            clearTimeout(focusTimeoutRef.current);
-        };
-    }, [shouldDelayFocus, shouldShowTextInput]);
+            return () => {
+                if (!focusTimeoutRef.current) {
+                    return;
+                }
+                clearTimeout(focusTimeoutRef.current);
+            };
+        }, [shouldShowTextInput]),
+    );
 
     /** Selects row when pressing Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {

src/components/StatePicker/StateSelectorModal.js

@@ -86,7 +86,6 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                     sections={[{data: searchResults, indexOffset: 0}]}
                     onSelectRow={onStateSelected}
                     onChangeText={setSearchValue}
-                    shouldDelayFocus
                     initiallyFocusedOptionKey={currentState}
                 />
             </ScreenWrapper>

src/pages/settings/Profile/PronounsPage.js

@@ -109,7 +109,6 @@ function PronounsPage(props) {
                     onSelectRow={updatePronouns}
                     onChangeText={onChangeText}
                     initiallyFocusedOptionKey={initiallyFocusedOption.keyForList}
-                    shouldDelayFocus
                 />
             )}
         </ScreenWrapper>

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -78,7 +78,6 @@ function TimezoneSelectPage(props) {
                 onSelectRow={saveSelectedTimezone}
                 sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
                 initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
-                shouldDelayFocus
                 showScrollIndicator
             />
         </ScreenWrapper>

src/pages/workspace/WorkspaceInvitePage.js

@@ -227,7 +227,6 @@ function WorkspaceInvitePage(props) {
                             onSelectRow={toggleOption}
                             onConfirm={inviteUser}
                             showScrollIndicator
-                            shouldDelayFocus
                             showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(props.personalDetails)}
                         />
                         <View style={[styles.flexShrink0]}>

src/pages/workspace/WorkspaceMembersPage.js

@@ -393,7 +393,6 @@ function WorkspaceMembersPage(props) {
                             onSelectAll={() => toggleAllUsers(data)}
                             onDismissError={dismissError}
                             showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)}
-                            shouldDelayFocus
                             showScrollIndicator
                         />
                     </View>