diff --git a/src/libs/UpdateMultilineInputRange/index.ios.js b/src/libs/UpdateMultilineInputRange/index.ios.js index 85ed529a33bc..4c10f768a2a2 100644 --- a/src/libs/UpdateMultilineInputRange/index.ios.js +++ b/src/libs/UpdateMultilineInputRange/index.ios.js @@ -8,8 +8,9 @@ * See https://github.com/Expensify/App/issues/20836 for more details. * * @param {Object} input the input element + * @param {boolean} shouldAutoFocus */ -export default function updateMultilineInputRange(input) { +export default function updateMultilineInputRange(input, shouldAutoFocus = true) { if (!input) { return; } @@ -19,5 +20,7 @@ export default function updateMultilineInputRange(input) { * Issue: does not scroll multiline input when text exceeds the maximum number of lines * For more details: https://github.com/Expensify/App/pull/27702#issuecomment-1728651132 */ - input.focus(); + if (shouldAutoFocus) { + input.focus(); + } } diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js index 179d30dc611d..66fb1889be21 100644 --- a/src/libs/UpdateMultilineInputRange/index.js +++ b/src/libs/UpdateMultilineInputRange/index.js @@ -8,8 +8,10 @@ * See https://github.com/Expensify/App/issues/20836 for more details. * * @param {Object} input the input element + * @param {boolean} shouldAutoFocus */ -export default function updateMultilineInputRange(input) { +// eslint-disable-next-line no-unused-vars +export default function updateMultilineInputRange(input, shouldAutoFocus = true) { if (!input) { return; } diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 849db381a549..24dbe969defb 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -34,6 +34,7 @@ import withKeyboardState from '../../../../components/withKeyboardState'; import {propTypes, defaultProps} from './composerWithSuggestionsProps'; import focusWithDelay from '../../../../libs/focusWithDelay'; import useDebounce from '../../../../hooks/useDebounce'; +import updateMultilineInputRange from '../../../../libs/UpdateMultilineInputRange'; import * as InputFocus from '../../../../libs/actions/InputFocus'; const {RNTextInputReset} = NativeModules; @@ -496,9 +497,13 @@ function ComposerWithSuggestions({ focus(); }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]); useEffect(() => { + // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit + updateMultilineInputRange(textInputRef.current, shouldAutoFocus); + if (value.length === 0) { return; } + Report.setReportWithDraft(reportID, true); // eslint-disable-next-line react-hooks/exhaustive-deps