diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js index 0a1beaa5daf2..e18615a34ffe 100644 --- 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); + }} /> diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js index 04f7edc613b2..eaad83fd4a84 100644 --- a/src/pages/tasks/NewTaskDetailsPage.js +++ b/src/pages/tasks/NewTaskDetailsPage.js @@ -102,6 +102,9 @@ function NewTaskPage(props) { setTaskDescription(value)} /> diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js index 747d7f44c83f..760209cbc597 100644 --- 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 ( (inputRef.current = el)} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + textAlignVertical="top" + selection={selection} + onSelectionChange={(e) => { + setSelection(e.nativeEvent.selection); + }} /> diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index a8b88f1a3495..617af9a1fd54 100644 --- 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 index 126dc280031f..c42c1a77c07f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2776,7 +2776,7 @@ const styles = { width: 250, }, - workspaceInviteWelcome: { + autoGrowHeightMultilineInput: { maxHeight: 115, },