fix: 29950 Reload on title and description of task field does not foc…

…us back
Expensify · Oct 24, 2023 · 4a50dbc · 4a50dbc
1 parent f6a9dde
commit 4a50dbc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 37 deletions.
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -1,7 +1,6 @@
-import React, {useRef, useCallback} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import {useFocusEffect} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
@@ -18,6 +17,7 @@ import * as Task from '../../libs/actions/Task';
 import updateMultilineInputRange from '../../libs/UpdateMultilineInputRange';
 import CONST from '../../CONST';
 import * as Browser from '../../libs/Browser';
+import useAutoFocusInput from '../../hooks/useAutoFocusInput';
 
 const propTypes = {
     /** Beta features list */
@@ -40,26 +40,7 @@ const defaultProps = {
 };
 
 function NewTaskDescriptionPage(props) {
-    const inputRef = useRef(null);
-    const focusTimeoutRef = useRef(null);
-    // On submit, we want to call the assignTask function and wait to validate
-    // the response
-
-    useFocusEffect(
-        useCallback(() => {
-            focusTimeoutRef.current = setTimeout(() => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
-                return () => {
-                    if (!focusTimeoutRef.current) {
-                        return;
-                    }
-                    clearTimeout(focusTimeoutRef.current);
-                };
-            }, CONST.ANIMATED_TRANSITION);
-        }, []),
-    );
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const onSubmit = (values) => {
         Task.setDescriptionValue(values.taskDescription);
@@ -97,11 +78,8 @@ function NewTaskDescriptionPage(props) {
                             accessibilityLabel={props.translate('newTaskPage.descriptionOptional')}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                             ref={(el) => {
-                                if (!el) {
-                                    return;
-                                }
-                                inputRef.current = el;
-                                updateMultilineInputRange(inputRef.current);
+                                inputCallbackRef(el);
+                                updateMultilineInputRange(el);
                             }}
                             autoGrowHeight
                             submitOnEnter={!Browser.isMobile()}

diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -16,6 +16,7 @@ import Permissions from '../../libs/Permissions';
 import ROUTES from '../../ROUTES';
 import * as Task from '../../libs/actions/Task';
 import CONST from '../../CONST';
+import useAutoFocusInput from '../../hooks/useAutoFocusInput';
 
 const propTypes = {
     /** Beta features list */
@@ -38,7 +39,7 @@ const defaultProps = {
 };
 
 function NewTaskTitlePage(props) {
-    const inputRef = useRef(null);
+    const {inputCallbackRef} = useAutoFocusInput();
 
     /**
      * @param {Object} values - form input values passed by the Form component
@@ -68,13 +69,6 @@ function NewTaskTitlePage(props) {
     }
     return (
         <ScreenWrapper
-            onEntryTransitionEnd={() => {
-                if (!inputRef.current) {
-                    return;
-                }
-
-                inputRef.current.focus();
-            }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={NewTaskTitlePage.displayName}
@@ -97,7 +91,7 @@ function NewTaskTitlePage(props) {
                     <TextInput
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={props.task.title}
-                        ref={(el) => (inputRef.current = el)}
+                        ref={inputCallbackRef}
                         inputID="taskTitle"
                         label={props.translate('task.title')}
                         accessibilityLabel={props.translate('task.title')}