From 4a50dbcf38b3003d749fcfa233ed77bb0051df25 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 24 Oct 2023 22:35:19 +0700
Subject: [PATCH] fix: 29950 Reload on title and description of task field does
 not focus back

---
 src/pages/tasks/NewTaskDescriptionPage.js | 32 ++++-------------------
 src/pages/tasks/NewTaskTitlePage.js       | 14 +++-------
 2 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 44fd4346538d..15f843853431 100644
--- 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
index 62eb1da4872a..f1c14dbe06b8 100644
--- 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')}