Merge pull request #32168 from bernhardoj/fix/31708-mweb-safari-auto-…

…focus

src/components/Composer/index.js

@@ -171,11 +171,10 @@ function Composer({
     const {windowWidth} = useWindowDimensions();
     const textRef = useRef(null);
     const textInput = useRef(null);
-    const initialValue = defaultValue ? `${defaultValue}` : `${value || ''}`;
     const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
     const [selection, setSelection] = useState({
-        start: initialValue.length,
-        end: initialValue.length,
+        start: selectionProp.start,
+        end: selectionProp.end,
     });
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');

src/libs/UpdateMultilineInputRange/index.js

@@ -1,3 +1,5 @@
+import * as Browser from '@libs/Browser';
+
 /**
  * Place the cursor at the end of the value (if there is a value in the input).
  *
@@ -10,15 +12,21 @@
  * @param {Object} input the input element
  * @param {boolean} shouldAutoFocus
  */
-// eslint-disable-next-line no-unused-vars
 export default function updateMultilineInputRange(input, shouldAutoFocus = true) {
     if (!input) {
         return;
     }
 
     if (input.value && input.setSelectionRange) {
         const length = input.value.length;
-        input.setSelectionRange(length, length);
+
+        // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
+        // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
+        // so we need to ensure that it is only updated after focus.
+        const shouldSetSelection = !(Browser.isMobileSafari() && !shouldAutoFocus);
+        if (shouldSetSelection) {
+            input.setSelectionRange(length, length);
+        }
         // eslint-disable-next-line no-param-reassign
         input.scrollTop = input.scrollHeight;
     }

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

@@ -10,7 +10,6 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -40,11 +39,6 @@ import {defaultProps, propTypes} from './composerWithSuggestionsProps';
 
 const {RNTextInputReset} = NativeModules;
 
-// For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
-// and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
-// so we need to ensure that it is only updated after focus.
-const isMobileSafari = Browser.isMobileSafari();
-
 /**
  * Broadcast that the user is typing. Debounced to limit how often we publish client events.
  * @param {String} reportID
@@ -132,10 +126,7 @@ function ComposerWithSuggestions({
     const valueRef = useRef(value);
     valueRef.current = value;
 
-    const [selection, setSelection] = useState(() => ({
-        start: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-        end: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-    }));
+    const [selection, setSelection] = useState(() => ({start: 0, end: 0}));
 
     const [composerHeight, setComposerHeight] = useState(0);