Merge pull request #28790 from jeet-dhandha/fix-27153

fix: auto focus and scroll to bottom on large-text in composer
Expensify · Oct 17, 2023 · 7fcb4c1 · 7fcb4c1
2 parents 5570eba + ce44e6e
commit 7fcb4c1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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