feat: Allow adding newlines in description for tasks

src/components/MenuItem.js

@@ -79,7 +79,6 @@ const MenuItem = (props) => {
             props.icon ? styles.ml3 : undefined,
             props.shouldShowBasicTitle ? undefined : styles.textStrong,
             props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined,
-            styles.pre,
             styles.ltr,
             props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
             isDeleted ? styles.offlineFeedback.deleted : undefined,

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 = {
 const 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]);
+
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
@@ -89,6 +100,13 @@ const 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>

src/pages/tasks/NewTaskDetailsPage.js

@@ -102,6 +102,9 @@ const NewTaskPage = (props) => {
                     <TextInput
                         inputID="taskDescription"
                         label={props.translate('newTaskPage.descriptionOptional')}
+                        autoGrowHeight
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                        textAlignVertical="top"
                         value={taskDescription}
                         onValueChange={(value) => setTaskDescription(value)}
                     />

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';
@@ -49,6 +49,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}
@@ -75,6 +86,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>

src/pages/workspace/WorkspaceInviteMessagePage.js

@@ -195,7 +195,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})}

src/styles/styles.js

@@ -2754,7 +2754,7 @@ const styles = {
         width: 250,
     },
 
-    workspaceInviteWelcome: {
+    autoGrowHeightMultilineInput: {
         maxHeight: 115,
     },