Merge pull request Expensify#18889 from dhairyasenjaliya/taskAutoFocu…

…sFix Task auto focus fix
haidernayyar · May 14, 2023 · 8fb932e · 8fb932e
2 parents 6377858 + 011e83e
commit 8fb932e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -36,6 +36,8 @@ const defaultProps = {
 };
 
 const NewTaskDescriptionPage = (props) => {
+    const inputRef = useRef(null);
+
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
@@ -56,7 +58,16 @@ const NewTaskDescriptionPage = (props) => {
         return null;
     }
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            onEntryTransitionEnd={() => {
+                if (!inputRef.current) {
+                    return;
+                }
+
+                inputRef.current.focus();
+            }}
+        >
             <HeaderWithCloseButton
                 title={props.translate('newTaskPage.description')}
                 onCloseButtonPress={() => Navigation.dismissModal()}
@@ -76,6 +87,7 @@ const NewTaskDescriptionPage = (props) => {
                         defaultValue={props.task.description}
                         inputID="taskDescription"
                         label={props.translate('newTaskPage.description')}
+                        ref={(el) => (inputRef.current = el)}
                     />
                 </View>
             </Form>

diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -37,6 +37,8 @@ const defaultProps = {
 };
 
 const NewTaskTitlePage = (props) => {
+    const inputRef = useRef(null);
+
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Boolean}
@@ -64,7 +66,16 @@ const NewTaskTitlePage = (props) => {
         return null;
     }
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            onEntryTransitionEnd={() => {
+                if (!inputRef.current) {
+                    return;
+                }
+
+                inputRef.current.focus();
+            }}
+            includeSafeAreaPaddingBottom={false}
+        >
             <HeaderWithCloseButton
                 title={props.translate('newTaskPage.title')}
                 onCloseButtonPress={() => Navigation.dismissModal()}
@@ -82,7 +93,7 @@ const NewTaskTitlePage = (props) => {
                 <View style={styles.mb5}>
                     <TextInput
                         defaultValue={props.task.title}
-                        autoFocus
+                        ref={(el) => (inputRef.current = el)}
                         inputID="taskTitle"
                         label={props.translate('newTaskPage.title')}
                     />