Merge pull request #19377 from akinwale/task-19135

feat: Allow adding newlines in description for tasks
Expensify · Jun 14, 2023 · 9b94847 · 9b94847
2 parents 862955c + 77a899f
commit 9b94847
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -38,6 +38,17 @@ const defaultProps = {
 function NewTaskDescriptionPage(props) {
     const inputRef = useRef(null);
 
+    // The selection will be used to place the cursor at the end if there is prior text in the text input area
+    const [selection, setSelection] = useState({start: 0, end: 0});
+
+    // eslint-disable-next-line rulesdir/prefer-early-return
+    useEffect(() => {
+        if (props.task.description) {
+            const length = props.task.description.length;
+            setSelection({start: length, end: length});
+        }
+    }, [props.task.description]);
+
     // On submit, we want to call the assignTask function and wait to validate
     // the response
     const onSubmit = (values) => {
@@ -78,6 +89,13 @@ function NewTaskDescriptionPage(props) {
                         inputID="taskDescription"
                         label={props.translate('newTaskPage.descriptionOptional')}
                         ref={(el) => (inputRef.current = el)}
+                        autoGrowHeight
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                        textAlignVertical="top"
+                        selection={selection}
+                        onSelectionChange={(e) => {
+                            setSelection(e.nativeEvent.selection);
+                        }}
                     />
                 </View>
             </Form>

diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
@@ -102,6 +102,9 @@ function NewTaskPage(props) {
                     <TextInput
                         inputID="taskDescription"
                         label={props.translate('newTaskPage.descriptionOptional')}
+                        autoGrowHeight
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                        textAlignVertical="top"
                         value={taskDescription}
                         onValueChange={(value) => setTaskDescription(value)}
                     />

diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -48,6 +48,17 @@ function TaskDescriptionPage(props) {
 
     const inputRef = useRef(null);
 
+    // Same as NewtaskDescriptionPage, use the selection to place the cursor correctly if there is prior text
+    const [selection, setSelection] = useState({start: 0, end: 0});
+
+    // eslint-disable-next-line rulesdir/prefer-early-return
+    useEffect(() => {
+        if (props.task.report && props.task.report.description) {
+            const length = props.task.report.description.length;
+            setSelection({start: length, end: length});
+        }
+    }, [props.task.report]);
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -69,6 +80,13 @@ function TaskDescriptionPage(props) {
                         label={props.translate('newTaskPage.descriptionOptional')}
                         defaultValue={(props.task.report && props.task.report.description) || ''}
                         ref={(el) => (inputRef.current = el)}
+                        autoGrowHeight
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                        textAlignVertical="top"
+                        selection={selection}
+                        onSelectionChange={(e) => {
+                            setSelection(e.nativeEvent.selection);
+                        }}
                     />
                 </View>
             </Form>

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -197,7 +197,7 @@ class WorkspaceInviteMessagePage extends React.Component {
                                 autoCorrect={false}
                                 autoGrowHeight
                                 textAlignVertical="top"
-                                containerStyles={[styles.workspaceInviteWelcome]}
+                                containerStyles={[styles.autoGrowHeightMultilineInput]}
                                 defaultValue={this.state.welcomeNote}
                                 value={this.state.welcomeNote}
                                 onChangeText={(text) => this.setState({welcomeNote: text})}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2776,7 +2776,7 @@ const styles = {
         width: 250,
     },
 
-    workspaceInviteWelcome: {
+    autoGrowHeightMultilineInput: {
         maxHeight: 115,
     },