From d8eb4262395888cb5147c63fd70fa6a0148d9163 Mon Sep 17 00:00:00 2001 From: christianwen Date: Fri, 8 Dec 2023 17:13:46 +0700 Subject: [PATCH 01/20] fix: 10731 --- src/components/Composer/index.js | 5 +++++ .../ComposerWithSuggestions.js | 18 +++++++++++------- .../ReportActionCompose/ReportActionCompose.js | 6 +----- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 4bb3df5c1b85..bea38fc38414 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -86,6 +86,8 @@ const propTypes = { /** Whether the sull composer is open */ isComposerFullSize: PropTypes.bool, + showSoftInputOnFocus: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -113,6 +115,7 @@ const defaultProps = { checkComposerVisibility: () => false, isReportActionCompose: false, isComposerFullSize: false, + showSoftInputOnFocus: true, }; /** @@ -164,6 +167,7 @@ function Composer({ selection: selectionProp, isReportActionCompose, isComposerFullSize, + showSoftInputOnFocus, ...props }) { const theme = useTheme(); @@ -445,6 +449,7 @@ function Composer({ forwardedRef={forwardedRef} defaultValue={defaultValue} autoFocus={autoFocus} + inputMode={!showSoftInputOnFocus && 'none'} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} onSelectionChange={addCursorPositionToSelectionChange} diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index f99bd7ab7d9d..5cd9fe8be1d5 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -49,10 +49,6 @@ const debouncedBroadcastUserIsTyping = _.debounce((reportID) => { const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); -// 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 -const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); - /** * This component holds the value and selection state. * If a component really needs access to these state values it should be put here. @@ -120,9 +116,9 @@ function ComposerWithSuggestions({ const {isSmallScreenWidth} = useWindowDimensions(); const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; - const isEmptyChat = useMemo(() => _.size(reportActions) === 1, [reportActions]); - const parentAction = ReportActionsUtils.getParentReportAction(report); - const shouldAutoFocus = !modal.isVisible && (shouldFocusInputOnScreenFocus || (isEmptyChat && !ReportActionsUtils.isTransactionThread(parentAction))) && shouldShowComposeInput; + const shouldAutoFocus = !modal.isVisible && shouldShowComposeInput; + + const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(false); const valueRef = useRef(value); valueRef.current = value; @@ -556,6 +552,14 @@ function ComposerWithSuggestions({ setComposerHeight(composerLayoutHeight); }} onScroll={hideSuggestionMenu} + showSoftInputOnFocus={showSoftInputOnFocus} + onTouchStart={() => { + if (showSoftInputOnFocus) { + return; + } + + setShowSoftInputOnFocus(true); + }} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 2632324a963f..885d566cf450 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -89,10 +89,6 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -// 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 -const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); - const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc(); function ReportActionCompose({ @@ -121,7 +117,7 @@ function ReportActionCompose({ */ const [isFocused, setIsFocused] = useState(() => { const initialModalState = getModalState(); - return shouldFocusInputOnScreenFocus && shouldShowComposeInput && !initialModalState.isVisible && !initialModalState.willAlertModalBecomeVisible; + return shouldShowComposeInput && !initialModalState.isVisible && !initialModalState.willAlertModalBecomeVisible; }); const [isFullComposerAvailable, setIsFullComposerAvailable] = useState(isComposerFullSize); From a5f99b738732b9d3609bb7c5ef4a826fabf8169b Mon Sep 17 00:00:00 2001 From: christianwen Date: Mon, 11 Dec 2023 11:42:09 +0700 Subject: [PATCH 02/20] lint fix --- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 1 - src/pages/home/report/ReportActionCompose/ReportActionCompose.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index d39ad7e8ff0c..ad8e5daa6256 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 canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; import * as ComposerUtils from '@libs/ComposerUtils'; import getDraftComment from '@libs/ComposerUtils/getDraftComment'; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 885d566cf450..cd49f1b0585d 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -15,7 +15,6 @@ import {usePersonalDetails, withNetwork} from '@components/OnyxProvider'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; import getDraftComment from '@libs/ComposerUtils/getDraftComment'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; From f6e2e28c0d57cacfeed4c2c615936b42122a1c59 Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 2 Jan 2024 16:00:51 +0700 Subject: [PATCH 03/20] lint fix --- src/components/Composer/index.tsx | 2 +- src/components/Composer/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 849bf14594df..d6249a1e3dcc 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -363,7 +363,7 @@ function Composer( value={value} defaultValue={defaultValue} autoFocus={autoFocus} - inputMode={!showSoftInputOnFocus ? 'none': 'text'} + inputMode={!showSoftInputOnFocus ? 'none' : 'text'} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} onSelectionChange={addCursorPositionToSelectionChange} diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index 208def7fabab..92ecc5038be4 100644 --- a/src/components/Composer/types.ts +++ b/src/components/Composer/types.ts @@ -72,7 +72,7 @@ type ComposerProps = { /** Should make the input only scroll inside the element avoid scroll out to parent */ shouldContainScroll?: boolean; - showSoftInputOnFocus?: boolean, + showSoftInputOnFocus?: boolean; }; export type {TextSelection, ComposerProps}; From 7e930b8e104ba234ea360d9db1750299f5816cf3 Mon Sep 17 00:00:00 2001 From: christianwen Date: Thu, 25 Jan 2024 17:49:48 +0700 Subject: [PATCH 04/20] lint fix --- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 535344e38786..c80016519ee6 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -120,7 +120,7 @@ function ComposerWithSuggestions({ const {isSmallScreenWidth} = useWindowDimensions(); const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; - + const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]); const shouldAutoFocus = !modal.isVisible && shouldShowComposeInput; From 5dc692229b23addada41e7486d63a181d53f91dd Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 5 Mar 2024 16:14:36 +0700 Subject: [PATCH 05/20] fix focus input --- src/components/Composer/index.tsx | 12 ++++++ .../ComposerWithSuggestions.tsx | 38 +++++++------------ .../ReportActionCompose.tsx | 7 +--- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 51bebd710e62..ffdb6825a211 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -327,6 +327,18 @@ function Composer( [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize], ); + useEffect(() => { + if (!showSoftInputOnFocus) { + return; + } + textInput.current?.blur(); + // On Safari when changing inputMode from none to text, the keyboard will cover the view + // We need the logic to re-focus to trigger the keyboard to open below the view + setTimeout(() => { + textInput.current?.focus(); + }, 2000); + }, [showSoftInputOnFocus]); + return ( <> ; - /** The parent report actions for the report */ - parentReportActions: OnyxEntry; - /** The modal state */ modal: OnyxEntry; @@ -155,21 +150,11 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps & /** Whether the edit is focused */ editFocused: boolean; - /** Wheater chat is empty */ - isEmptyChat?: boolean; - /** The last report action */ lastReportAction?: OnyxTypes.ReportAction; /** Whether to include chronos */ includeChronos?: boolean; - - /** The parent report action ID */ - parentReportActionID?: string; - - /** The parent report ID */ - // eslint-disable-next-line react/no-unused-prop-types -- its used in the withOnyx HOC - parentReportID: string | undefined; }; const {RNTextInputReset} = NativeModules; @@ -196,15 +181,12 @@ function ComposerWithSuggestions( // Onyx modal, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, - parentReportActions, numberOfLines, // Props: Report reportID, includeChronos, - isEmptyChat, lastReportAction, - parentReportActionID, // Focus onFocus, @@ -262,7 +244,6 @@ function ComposerWithSuggestions( const {isSmallScreenWidth} = useWindowDimensions(); const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; - const parentReportAction = parentReportActions?.[parentReportActionID ?? ''] ?? null; const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput; const valueRef = useRef(value); @@ -276,6 +257,7 @@ function ComposerWithSuggestions( const textInputRef = useRef(null); const insertedEmojisRef = useRef([]); + const shouldInitFocus = useRef(true); const syncSelectionWithOnChangeTextRef = useRef(null); @@ -659,7 +641,15 @@ function ComposerWithSuggestions( // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. - if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal?.isVisible && isFocused && (!!prevIsModalVisible || !prevIsFocused))) { + if ( + !( + (willBlurTextInputOnTapOutside || shouldAutoFocus) && + !isNextModalWillOpenRef.current && + !modal?.isVisible && + isFocused && + (!!prevIsModalVisible || !prevIsFocused || shouldInitFocus.current) + ) + ) { return; } @@ -668,6 +658,9 @@ function ComposerWithSuggestions( return; } focus(true); + if (shouldInitFocus.current) { + shouldInitFocus.current = false; + } }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus]); useEffect(() => { @@ -817,11 +810,6 @@ export default withOnyx `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`, - canEvict: false, - initWithStoredValues: false, - }, })(memo(ComposerWithSuggestionsWithRef)); export type {ComposerWithSuggestionsProps}; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index bc3bb4fd19d6..345f4a24cfea 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -23,7 +23,6 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import getDraftComment from '@libs/ComposerUtils/getDraftComment'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import getModalState from '@libs/getModalState'; @@ -73,7 +72,7 @@ type ReportActionComposeOnyxProps = { type ReportActionComposeProps = ReportActionComposeOnyxProps & WithCurrentUserPersonalDetailsProps & - Pick & { + Pick & { /** A method to call when the form is submitted */ onSubmit: (newComment: string | undefined) => void; @@ -101,7 +100,6 @@ function ReportActionCompose({ listHeight = 0, shouldShowComposeInput = true, isReportReadyForDisplay = true, - isEmptyChat, lastReportAction, }: ReportActionComposeProps) { const styles = useThemeStyles(); @@ -414,10 +412,7 @@ function ReportActionCompose({ isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered} raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered} reportID={reportID} - parentReportID={report?.parentReportID} - parentReportActionID={report?.parentReportActionID} includeChronos={ReportUtils.chatIncludesChronos(report)} - isEmptyChat={isEmptyChat} lastReportAction={lastReportAction} isMenuVisible={isMenuVisible} inputPlaceholder={inputPlaceholder} From b6647b48816e5772850cb754c00d9aff5a7ae796 Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 5 Mar 2024 17:20:09 +0700 Subject: [PATCH 06/20] focus input on safari --- src/components/Composer/index.tsx | 12 ---------- .../ComposerWithSuggestions.tsx | 22 ++++++++++++++++++- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index ffdb6825a211..51bebd710e62 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -327,18 +327,6 @@ function Composer( [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize], ); - useEffect(() => { - if (!showSoftInputOnFocus) { - return; - } - textInput.current?.blur(); - // On Safari when changing inputMode from none to text, the keyboard will cover the view - // We need the logic to re-focus to trigger the keyboard to open below the view - setTimeout(() => { - textInput.current?.focus(); - }, 2000); - }, [showSoftInputOnFocus]); - return ( <> (null); const insertedEmojisRef = useRef([]); const shouldInitFocus = useRef(true); + const isFocusedWhileChangingInputMode = useRef(false); const syncSelectionWithOnChangeTextRef = useRef(null); @@ -711,6 +712,16 @@ function ComposerWithSuggestions( // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + if (!showSoftInputOnFocus || !isFocusedWhileChangingInputMode.current) { + return; + } + // On Safari when changing inputMode from none to text, the keyboard will cover the view + // We need to re-focus to trigger the keyboard to open below the view + isFocusedWhileChangingInputMode.current = false; + textInputRef.current?.focus(); + }, [showSoftInputOnFocus]); + return ( <> @@ -727,7 +738,12 @@ function ComposerWithSuggestions( style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]} maxLines={maxComposerLines} onFocus={onFocus} - onBlur={onBlur} + onBlur={(e) => { + if (isFocusedWhileChangingInputMode.current) { + return; + } + onBlur(e); + }} onClick={setShouldBlockSuggestionCalcToFalse} onPasteFile={displayFileInModal} shouldClear={textInputShouldClear} @@ -751,6 +767,10 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } + if (Browser.isMobileSafari()) { + isFocusedWhileChangingInputMode.current = true; + textInputRef.current?.blur(); + } setShowSoftInputOnFocus(true); }} From eb79042fcbecc617a2e4651fb3353efb2fa9e8c1 Mon Sep 17 00:00:00 2001 From: christianwen Date: Wed, 10 Apr 2024 11:09:59 +0700 Subject: [PATCH 07/20] lint fix --- .../home/report/ReportActionCompose/ReportActionCompose.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 6214b30e8278..a10e3bd0a36c 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -23,7 +23,6 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import {getDraftComment} from '@libs/DraftCommentUtils'; import getModalState from '@libs/getModalState'; From b008b0557680ab52d7c68f9f50fb030c7fef80b4 Mon Sep 17 00:00:00 2001 From: christianwen Date: Thu, 15 Aug 2024 00:15:35 +0700 Subject: [PATCH 08/20] fix rn to remove autoFill when hide context menu --- ...25+remove-autoFill-contextMenuHidden.patch | 40 +++++++++++++++++++ src/components/Composer/index.native.tsx | 16 +++++++- .../ComposerWithSuggestions.tsx | 4 +- .../ReportActionCompose.tsx | 2 - src/pages/home/report/ReportFooter.tsx | 6 --- 5 files changed, 57 insertions(+), 11 deletions(-) create mode 100644 patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch diff --git a/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch b/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch new file mode 100644 index 000000000000..6d673cbfba94 --- /dev/null +++ b/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch @@ -0,0 +1,40 @@ +diff --git a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm +index 20807aa..31aec69 100644 +--- a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm ++++ b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm +@@ -294,6 +294,15 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender + return [super canPerformAction:action withSender:sender]; + } + ++-(void)buildMenuWithBuilder:(id)builder { ++ if (_contextMenuHidden) { ++ if (@available(iOS 17.0, *)) { ++ [builder removeMenuForIdentifier:UIMenuAutoFill]; ++ } ++ } ++ [super buildMenuWithBuilder:builder]; ++} ++ + #pragma mark - Dictation + + - (void)dictationRecordingDidEnd +diff --git a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm +index 507df43..1461bb4 100644 +--- a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm ++++ b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm +@@ -150,6 +150,15 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender + return [super canPerformAction:action withSender:sender]; + } + ++-(void)buildMenuWithBuilder:(id)builder { ++ if (_contextMenuHidden) { ++ if (@available(iOS 17.0, *)) { ++ [builder removeMenuForIdentifier:UIMenuAutoFill]; ++ } ++ } ++ [super buildMenuWithBuilder:builder]; ++} ++ + #pragma mark - Dictation + + - (void)dictationRecordingDidEnd diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index b801743732bc..3ba6fd661a39 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -1,6 +1,6 @@ import type {MarkdownStyle} from '@expensify/react-native-live-markdown'; import type {ForwardedRef} from 'react'; -import React, {useCallback, useMemo, useRef} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native'; import {StyleSheet} from 'react-native'; import type {FileObject} from '@components/AttachmentModal'; @@ -13,6 +13,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as EmojiUtils from '@libs/EmojiUtils'; +import CONST from '@src/CONST'; import type {ComposerProps} from './types'; const excludeNoStyles: Array = []; @@ -34,6 +35,7 @@ function Composer( selection, value, isGroupPolicyReport = false, + showSoftInputOnFocus, ...props }: ComposerProps, ref: ForwardedRef, @@ -45,6 +47,7 @@ function Composer( const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const [contextMenuHidden, setContextMenuHidden] = useState(!showSoftInputOnFocus); /** * Set the TextInput Ref @@ -89,6 +92,15 @@ function Composer( const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); + useEffect(() => { + if (!showSoftInputOnFocus) { + return; + } + setTimeout(() => { + setContextMenuHidden(false); + }, CONST.ANIMATED_TRANSITION); + }, [showSoftInputOnFocus]); + return ( ); } diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 04ea6684ed16..9f56331259cc 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -693,7 +693,7 @@ function ComposerWithSuggestions( [onCleared, updateComment], ); - useEffect(()=>{ + useEffect(() => { if (!showSoftInputOnFocus || !isFocusedWhileChangingInputMode.current) { return; } @@ -702,7 +702,7 @@ function ComposerWithSuggestions( isFocusedWhileChangingInputMode.current = false; textInputRef.current?.focus(); }, [showSoftInputOnFocus]); - + useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index b78e6fed8ee7..9df2419ff23c 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -27,8 +27,6 @@ import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; -import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import {getDraftComment} from '@libs/DraftCommentUtils'; import getModalState from '@libs/getModalState'; diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx index ee8b7cde1971..3e62f0c26f4e 100644 --- a/src/pages/home/report/ReportFooter.tsx +++ b/src/pages/home/report/ReportFooter.tsx @@ -47,9 +47,6 @@ type ReportFooterProps = { /** Whether to show educational tooltip in workspace chat for first-time user */ workspaceTooltip: OnyxEntry; - /** Whether the chat is empty */ - isEmptyChat?: boolean; - /** The pending action when we are adding a chat */ pendingAction?: PendingAction; @@ -72,7 +69,6 @@ function ReportFooter({ report = {reportID: '-1'}, reportMetadata, policy, - isEmptyChat = true, isReportReadyForDisplay = true, isComposerFullSize = false, workspaceTooltip, @@ -212,7 +208,6 @@ function ReportFooter({ onComposerBlur={onComposerBlur} reportID={report.reportID} report={report} - isEmptyChat={isEmptyChat} lastReportAction={lastReportAction} pendingAction={pendingAction} isComposerFullSize={isComposerFullSize} @@ -234,7 +229,6 @@ export default memo( lodashIsEqual(prevProps.report, nextProps.report) && prevProps.pendingAction === nextProps.pendingAction && prevProps.isComposerFullSize === nextProps.isComposerFullSize && - prevProps.isEmptyChat === nextProps.isEmptyChat && prevProps.lastReportAction === nextProps.lastReportAction && prevProps.isReportReadyForDisplay === nextProps.isReportReadyForDisplay && prevProps.workspaceTooltip?.shouldShow === nextProps.workspaceTooltip?.shouldShow && From 025fa15704e9243328eaf023ce7f3531ccdbc686 Mon Sep 17 00:00:00 2001 From: christianwen Date: Thu, 15 Aug 2024 00:24:01 +0700 Subject: [PATCH 09/20] type fix --- src/pages/home/ReportScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 45826a873be9..5733cfd370a4 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -805,7 +805,6 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro policy={policy} pendingAction={reportPendingAction} isComposerFullSize={!!isComposerFullSize} - isEmptyChat={isEmptyChat} lastReportAction={lastReportAction} workspaceTooltip={workspaceTooltip} /> From 726154dfea46faa891807e05707d111f37348cfc Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 27 Aug 2024 11:24:38 +0700 Subject: [PATCH 10/20] lint fix --- src/components/Composer/index.native.tsx | 2 +- src/pages/home/ReportScreen.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 1bc66f7d5474..370e5ec80a1d 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -15,8 +15,8 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as EmojiUtils from '@libs/EmojiUtils'; -import CONST from '@src/CONST'; import * as FileUtils from '@libs/fileDownload/FileUtils'; +import CONST from '@src/CONST'; import type {ComposerProps} from './types'; const excludeNoStyles: Array = []; diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index c96eec8dcd64..21d20bd853cc 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -275,7 +275,6 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro const {reportPendingAction, reportErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report); const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}]; - const isEmptyChat = useMemo(() => ReportUtils.isEmptyReport(report), [report]); const isOptimisticDelete = report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED; const indexOfLinkedMessage = useMemo( (): number => reportActions.findIndex((obj) => String(obj.reportActionID) === String(reportActionIDFromRoute)), From 69bc46851edec379a0deb8d002e4a62514e69b24 Mon Sep 17 00:00:00 2001 From: christianwen Date: Mon, 9 Sep 2024 10:37:28 +0700 Subject: [PATCH 11/20] remove outdated file --- ...25+remove-autoFill-contextMenuHidden.patch | 40 ------------------- 1 file changed, 40 deletions(-) delete mode 100644 patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch diff --git a/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch b/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch deleted file mode 100644 index 6d673cbfba94..000000000000 --- a/patches/react-native+0.73.4+025+remove-autoFill-contextMenuHidden.patch +++ /dev/null @@ -1,40 +0,0 @@ -diff --git a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm -index 20807aa..31aec69 100644 ---- a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm -+++ b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm -@@ -294,6 +294,15 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender - return [super canPerformAction:action withSender:sender]; - } - -+-(void)buildMenuWithBuilder:(id)builder { -+ if (_contextMenuHidden) { -+ if (@available(iOS 17.0, *)) { -+ [builder removeMenuForIdentifier:UIMenuAutoFill]; -+ } -+ } -+ [super buildMenuWithBuilder:builder]; -+} -+ - #pragma mark - Dictation - - - (void)dictationRecordingDidEnd -diff --git a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm -index 507df43..1461bb4 100644 ---- a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm -+++ b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm -@@ -150,6 +150,15 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender - return [super canPerformAction:action withSender:sender]; - } - -+-(void)buildMenuWithBuilder:(id)builder { -+ if (_contextMenuHidden) { -+ if (@available(iOS 17.0, *)) { -+ [builder removeMenuForIdentifier:UIMenuAutoFill]; -+ } -+ } -+ [super buildMenuWithBuilder:builder]; -+} -+ - #pragma mark - Dictation - - - (void)dictationRecordingDidEnd From 7ba9d60f8f2d0b7bc74abe356e40b3a8a77aae4e Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 17 Sep 2024 22:31:43 +0700 Subject: [PATCH 12/20] clean isFocusedWhileChangingInputMode logic --- .../ComposerWithSuggestions.tsx | 23 +------------------ 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index ee75595ed9e3..61e5e121ffde 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -290,7 +290,6 @@ function ComposerWithSuggestions( const textInputRef = useRef(null); const shouldInitFocus = useRef(true); - const isFocusedWhileChangingInputMode = useRef(false); const syncSelectionWithOnChangeTextRef = useRef(null); @@ -709,16 +708,6 @@ function ComposerWithSuggestions( [onCleared, updateComment], ); - useEffect(() => { - if (!showSoftInputOnFocus || !isFocusedWhileChangingInputMode.current) { - return; - } - // On Safari when changing inputMode from none to text, the keyboard will cover the view - // We need to re-focus to trigger the keyboard to open below the view - isFocusedWhileChangingInputMode.current = false; - textInputRef.current?.focus(); - }, [showSoftInputOnFocus]); - useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. @@ -778,12 +767,7 @@ function ComposerWithSuggestions( setUpComposeFocusManager(true); onFocus(); }} - onBlur={(e) => { - if (isFocusedWhileChangingInputMode.current) { - return; - } - onBlur(e); - }} + onBlur={onBlur} onClick={setShouldBlockSuggestionCalcToFalse} onPasteFile={(file) => { textInputRef.current?.blur(); @@ -806,11 +790,6 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } - if (Browser.isMobileSafari()) { - isFocusedWhileChangingInputMode.current = true; - textInputRef.current?.blur(); - } - setShowSoftInputOnFocus(true); }} shouldContainScroll={Browser.isMobileSafari()} From ca23e240b0b4be482818474bec3843b780f93688 Mon Sep 17 00:00:00 2001 From: christianwen Date: Fri, 20 Sep 2024 14:47:36 +0700 Subject: [PATCH 13/20] bump rn livemarkdown version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index a5ae221a1e14..588cf9e3e1d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.143", + "@expensify/react-native-live-markdown": "0.1.156", "@expo/metro-runtime": "~3.2.3", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", @@ -3633,9 +3633,9 @@ } }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.143", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.143.tgz", - "integrity": "sha512-hZXYjKyTl/b2p7Ig9qhoB7cfVtTTcoE2cWvea8NJT3f5ZYckdyHDAgHI4pg0S0N68jP205Sk5pzqlltZUpZk5w==", + "version": "0.1.156", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.156.tgz", + "integrity": "sha512-AOhsrIQlEIVsfbx+caYb9x68q0swxlP0ejlxb89OS6bY5OTiQUaM8aRfEkmWjb9vwkpHYVm8fOJ0CvZ6nRs17w==", "workspaces": [ "parser", "example", diff --git a/package.json b/package.json index 3d808af65ba2..d94637700994 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.143", + "@expensify/react-native-live-markdown": "0.1.156", "@expo/metro-runtime": "~3.2.3", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", From c59d44fa04b0c365783bac1ceee4d0a4abbd640f Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 24 Sep 2024 16:19:56 +0700 Subject: [PATCH 14/20] use isKeyboardShown --- src/components/Composer/index.native.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 370e5ec80a1d..f6d88a11033f 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -8,6 +8,7 @@ import type {FileObject} from '@components/AttachmentModal'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; +import useKeyboardState from '@hooks/useKeyboardState'; import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useResetComposerFocus from '@hooks/useResetComposerFocus'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -53,6 +54,8 @@ function Composer( const [contextMenuHidden, setContextMenuHidden] = useState(!showSoftInputOnFocus); const {inputCallbackRef, inputRef: autoFocusInputRef} = useAutoFocusInput(); + const keyboardState = useKeyboardState(); + const isKeyboardShown = keyboardState?.isKeyboardShown ?? false; useEffect(() => { if (autoFocus === !!autoFocusInputRef.current) { @@ -113,13 +116,11 @@ function Composer( const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); useEffect(() => { - if (!showSoftInputOnFocus) { + if (!showSoftInputOnFocus || !isKeyboardShown) { return; } - setTimeout(() => { - setContextMenuHidden(false); - }, CONST.ANIMATED_TRANSITION); - }, [showSoftInputOnFocus]); + setContextMenuHidden(false); + }, [showSoftInputOnFocus, isKeyboardShown]); return ( Date: Tue, 24 Sep 2024 16:31:50 +0700 Subject: [PATCH 15/20] update rn-livemarkdown version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ec43774ee5a..3c27c44a3bd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.156", + "@expensify/react-native-live-markdown": "0.1.143", "@expo/metro-runtime": "~3.2.3", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", @@ -3634,9 +3634,9 @@ } }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.156", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.156.tgz", - "integrity": "sha512-AOhsrIQlEIVsfbx+caYb9x68q0swxlP0ejlxb89OS6bY5OTiQUaM8aRfEkmWjb9vwkpHYVm8fOJ0CvZ6nRs17w==", + "version": "0.1.143", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.143.tgz", + "integrity": "sha512-hZXYjKyTl/b2p7Ig9qhoB7cfVtTTcoE2cWvea8NJT3f5ZYckdyHDAgHI4pg0S0N68jP205Sk5pzqlltZUpZk5w==", "workspaces": [ "parser", "example", diff --git a/package.json b/package.json index d64fc3008351..6f4980f04ee0 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.156", + "@expensify/react-native-live-markdown": "0.1.143", "@expo/metro-runtime": "~3.2.3", "@firebase/app": "^0.10.10", "@firebase/performance": "^0.6.8", From 18055aefcc94f1a327c2b998864ae3a8e1d6524f Mon Sep 17 00:00:00 2001 From: christianwen Date: Tue, 24 Sep 2024 16:44:16 +0700 Subject: [PATCH 16/20] remove CONST --- src/components/Composer/index.native.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index f6d88a11033f..da2fc1a9b29f 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -17,7 +17,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as EmojiUtils from '@libs/EmojiUtils'; import * as FileUtils from '@libs/fileDownload/FileUtils'; -import CONST from '@src/CONST'; import type {ComposerProps} from './types'; const excludeNoStyles: Array = []; From 381fdff1dfe89843fd9576f8f5d679ae987b5cbf Mon Sep 17 00:00:00 2001 From: christianwen Date: Wed, 25 Sep 2024 17:09:48 +0700 Subject: [PATCH 17/20] safari keyboard show --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index db1a217ae2c2..957dec32bf16 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -790,7 +790,9 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } - setShowSoftInputOnFocus(true); + setTimeout(()=>{ + setShowSoftInputOnFocus(true); + }, CONST.ANIMATED_TRANSITION) }} shouldContainScroll={Browser.isMobileSafari()} isGroupPolicyReport={isGroupPolicyReport} From e08d442120ee985e45929f131aa187f205eec7a2 Mon Sep 17 00:00:00 2001 From: christianwen Date: Wed, 25 Sep 2024 17:18:27 +0700 Subject: [PATCH 18/20] lint fix --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 957dec32bf16..45fbc7476967 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -790,9 +790,9 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } - setTimeout(()=>{ + setTimeout(() => { setShowSoftInputOnFocus(true); - }, CONST.ANIMATED_TRANSITION) + }, CONST.ANIMATED_TRANSITION); }} shouldContainScroll={Browser.isMobileSafari()} isGroupPolicyReport={isGroupPolicyReport} From 2282bf6c04ec1fbecde64026dc38dff0f68b0183 Mon Sep 17 00:00:00 2001 From: christianwen Date: Wed, 25 Sep 2024 18:07:34 +0700 Subject: [PATCH 19/20] remove redundant fix --- .../ComposerWithSuggestions.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 45fbc7476967..c47429a3eafb 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -289,8 +289,6 @@ function ComposerWithSuggestions( const textInputRef = useRef(null); - const shouldInitFocus = useRef(true); - const syncSelectionWithOnChangeTextRef = useRef(null); // The ref to check whether the comment saving is in progress @@ -648,7 +646,7 @@ function ComposerWithSuggestions( !isNextModalWillOpenRef.current && !modal?.isVisible && isFocused && - (!!prevIsModalVisible || !prevIsFocused || shouldInitFocus.current) + (!!prevIsModalVisible || !prevIsFocused) ) ) { return; @@ -659,9 +657,6 @@ function ComposerWithSuggestions( return; } focus(true); - if (shouldInitFocus.current) { - shouldInitFocus.current = false; - } }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal?.isVisible, isNextModalWillOpenRef, shouldAutoFocus]); useEffect(() => { @@ -790,9 +785,13 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } - setTimeout(() => { - setShowSoftInputOnFocus(true); - }, CONST.ANIMATED_TRANSITION); + if(Browser.isMobileSafari()){ + setTimeout(() => { + setShowSoftInputOnFocus(true); + }, CONST.ANIMATED_TRANSITION); + return; + } + setShowSoftInputOnFocus(true); }} shouldContainScroll={Browser.isMobileSafari()} isGroupPolicyReport={isGroupPolicyReport} From 1245315af87b4adaa3fdad34d1115a61a9fbd6ab Mon Sep 17 00:00:00 2001 From: christianwen Date: Wed, 25 Sep 2024 18:28:50 +0700 Subject: [PATCH 20/20] lint fix --- .../ComposerWithSuggestions.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index c47429a3eafb..752d35a6cbe0 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -640,15 +640,7 @@ function ComposerWithSuggestions( // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. - if ( - !( - (willBlurTextInputOnTapOutside || shouldAutoFocus) && - !isNextModalWillOpenRef.current && - !modal?.isVisible && - isFocused && - (!!prevIsModalVisible || !prevIsFocused) - ) - ) { + if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal?.isVisible && isFocused && (!!prevIsModalVisible || !prevIsFocused))) { return; } @@ -785,7 +777,7 @@ function ComposerWithSuggestions( if (showSoftInputOnFocus) { return; } - if(Browser.isMobileSafari()){ + if (Browser.isMobileSafari()) { setTimeout(() => { setShowSoftInputOnFocus(true); }, CONST.ANIMATED_TRANSITION);