fix: auto focus and scroll to bottom on large-text in composer

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

@@ -33,6 +33,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';
 
 const {RNTextInputReset} = NativeModules;
 
@@ -50,6 +51,7 @@ const debouncedBroadcastUserIsTyping = _.debounce((reportID) => {
 }, 100);
 
 const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();
+const isNativeApp = !willBlurTextInputOnTapOutside;
 
 // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
 // prevent auto focus on existing chat for mobile device
@@ -124,6 +126,7 @@ function ComposerWithSuggestions({
 
     const textInputRef = useRef(null);
     const insertedEmojisRef = useRef([]);
+    const initialFocusedRef = useRef(false);
 
     // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
     const isScrollLikelyLayoutTriggered = useRef(false);
@@ -445,6 +448,17 @@ function ComposerWithSuggestions({
         textInputRef.current.blur();
     }, []);
 
+    useEffect(() => {
+        // Initial focus ref to prevent unneccessary focus after first render.
+        if (initialFocusedRef.current || isNativeApp || !shouldAutoFocus) {
+            return;
+        }
+
+        // Set the `selection at end` and `scrolls input to bottom` for `Web Platforms`.
+        updateMultilineInputRange(textInputRef.current);
+        initialFocusedRef.current = true;
+    }, [shouldAutoFocus]);
+
     useEffect(() => {
         const unsubscribeNavigationBlur = navigation.addListener('blur', () => KeyDownListener.removeKeyDownPressListner(focusComposerOnKeyPress));
         const unsubscribeNavigationFocus = navigation.addListener('focus', () => {