From 7c73086fcae8dddafa258f0eb9d1ae3633d01f02 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 29 Nov 2023 16:51:02 +0800 Subject: [PATCH 1/2] fix compsoer in mweb safari is always auto focused --- src/components/Composer/index.js | 5 ++--- src/libs/UpdateMultilineInputRange/index.js | 11 +++++++++-- .../ComposerWithSuggestions.js | 5 +---- 3 files changed, 12 insertions(+), 9 deletions(-) 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..1a60355fd9b2 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,13 @@ export default function updateMultilineInputRange(input, shouldAutoFocus = true) if (input.value && input.setSelectionRange) { const length = input.value.length; - input.setSelectionRange(length, length); + + // On mobile safari, setting a selection will focus the input even when the auto focus is false. + // So, don't set the selection if the browser is mobile safari and auto focus is false. + 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 663db82a6067..ab1bc79c137e 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -132,10 +132,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); From 5e3293f0b9981990992f440c4c8f1d751eb01da0 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 29 Nov 2023 17:13:54 +0800 Subject: [PATCH 2/2] remove unused usage and move the comment --- src/libs/UpdateMultilineInputRange/index.js | 5 +++-- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 6 ------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js index 1a60355fd9b2..7de700fe7636 100644 --- a/src/libs/UpdateMultilineInputRange/index.js +++ b/src/libs/UpdateMultilineInputRange/index.js @@ -20,8 +20,9 @@ export default function updateMultilineInputRange(input, shouldAutoFocus = true) if (input.value && input.setSelectionRange) { const length = input.value.length; - // On mobile safari, setting a selection will focus the input even when the auto focus is false. - // So, don't set the selection if the browser is mobile safari and auto focus is false. + // 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); diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index ab1bc79c137e..6ed075e0fbbc 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