diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index cbf8a6e40abd..48eb89bb0296 100755 --- a/src/components/Composer/index.js +++ b/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(''); diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js index 66fb1889be21..7de700fe7636 100644 --- a/src/libs/UpdateMultilineInputRange/index.js +++ b/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,7 +12,6 @@ * @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; @@ -18,7 +19,14 @@ export default function updateMultilineInputRange(input, shouldAutoFocus = true) 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; } diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 02f041ce092e..f3075cb6b698 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/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);