From 5e7121a365e8a9b66a46e551ced9b30410ebc124 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 23 Feb 2024 21:23:55 +0300 Subject: [PATCH 01/12] fix auto focus on reply in thread --- src/components/Composer/index.tsx | 19 ++++++++----- src/libs/focusComposerWithDelay.ts | 28 +++++++++++-------- .../ComposerWithSuggestions.js | 3 +- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 516de55c73ba..8f9f457c7b51 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -73,6 +73,7 @@ function Composer( isReportActionCompose = false, isComposerFullSize = false, shouldContainScroll = false, + isMainComposer = false, ...props }: ComposerProps, ref: ForwardedRef, @@ -344,13 +345,17 @@ function Composer( disabled={isDisabled} onKeyPress={handleKeyPress} onFocus={(e) => { - ReportActionComposeFocusManager.onComposerFocus(() => { - if (!textInput.current) { - return; - } - - textInput.current.focus(); - }); + if (isMainComposer) { + ReportActionComposeFocusManager.onComposerFocus(null); + } else { + ReportActionComposeFocusManager.onComposerFocus(() => { + if (!textInput.current) { + return; + } + + textInput.current.focus(); + }); + } props.onFocus?.(e); }} diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index 6a2f85f7d311..4d815db99c98 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -1,12 +1,14 @@ +import {InteractionManager} from 'react-native'; import type {TextInput} from 'react-native'; import * as EmojiPickerAction from './actions/EmojiPickerAction'; import ComposerFocusManager from './ComposerFocusManager'; +import ReportActionComposeFocusManager from './ReportActionComposeFocusManager'; type FocusComposerWithDelay = (shouldDelay?: boolean) => void; /** * Create a function that focuses the composer. */ -function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithDelay { +function focusComposerWithDelay(textInputRef: TextInput | null | undefined): FocusComposerWithDelay { /** * Focus the text input * @param [shouldDelay] Impose delay before focusing the text input @@ -14,19 +16,23 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { - return; - } + InteractionManager.runAfterInteractions(() => { + const textInput = textInputRef ?? ReportActionComposeFocusManager.composerRef.current; - if (!shouldDelay) { - textInput.focus(); - return; - } - ComposerFocusManager.isReadyToFocus().then(() => { - if (!textInput) { + if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } - textInput.focus(); + + if (!shouldDelay) { + textInput.focus(); + return; + } + ComposerFocusManager.isReadyToFocus().then(() => { + if (!textInput) { + return; + } + textInput.focus(); + }); }); }; } diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 12e31495af2b..d611ddf591ab 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -447,7 +447,7 @@ function ComposerWithSuggestions({ * @memberof ReportActionCompose */ const focus = useCallback((shouldDelay = false) => { - focusComposerWithDelay(textInputRef.current)(shouldDelay); + focusComposerWithDelay()(shouldDelay); }, []); const setUpComposeFocusManager = useCallback(() => { @@ -592,6 +592,7 @@ function ComposerWithSuggestions({ <> Date: Thu, 7 Mar 2024 00:19:49 +0300 Subject: [PATCH 02/12] refactor on the implementation --- src/components/Composer/index.tsx | 6 +++-- src/libs/ReportActionComposeFocusManager.ts | 2 +- src/libs/focusComposerWithDelay.ts | 27 +++++++++---------- .../report/ContextMenu/ContextMenuActions.tsx | 5 +++- .../ComposerWithSuggestions.tsx | 3 +-- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 4baff0c07321..d1981e3c7f32 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -73,7 +73,6 @@ function Composer( isReportActionCompose = false, isComposerFullSize = false, shouldContainScroll = false, - isMainComposer = false, ...props }: ComposerProps, ref: ForwardedRef, @@ -346,9 +345,12 @@ function Composer( disabled={isDisabled} onKeyPress={handleKeyPress} onFocus={(e) => { - if (isMainComposer) { + if (isReportActionCompose) { ReportActionComposeFocusManager.onComposerFocus(null); } else { + // While a user was editing a comment and if they open on LHN menu we want the focus to return + // to the ReportActionItemMessageEdit compose after they click on the menu (for e.g. mark as read) + // so we assign the focus callback here. ReportActionComposeFocusManager.onComposerFocus(() => { if (!textInput.current) { return; diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 123d97987e14..64e4530e0fe5 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -18,7 +18,7 @@ let mainComposerFocusCallback: FocusCallback | null = null; * * @param callback callback to register */ -function onComposerFocus(callback: FocusCallback, isMainComposer = false) { +function onComposerFocus(callback: FocusCallback | null, isMainComposer = false) { if (isMainComposer) { mainComposerFocusCallback = callback; } else { diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index 4d815db99c98..4909c4c0a4ea 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -1,4 +1,3 @@ -import {InteractionManager} from 'react-native'; import type {TextInput} from 'react-native'; import * as EmojiPickerAction from './actions/EmojiPickerAction'; import ComposerFocusManager from './ComposerFocusManager'; @@ -8,7 +7,7 @@ type FocusComposerWithDelay = (shouldDelay?: boolean) => void; /** * Create a function that focuses the composer. */ -function focusComposerWithDelay(textInputRef: TextInput | null | undefined): FocusComposerWithDelay { +function focusComposerWithDelay(textInputRef: TextInput | null): FocusComposerWithDelay { /** * Focus the text input * @param [shouldDelay] Impose delay before focusing the text input @@ -16,23 +15,21 @@ function focusComposerWithDelay(textInputRef: TextInput | null | undefined): Foc return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - InteractionManager.runAfterInteractions(() => { - const textInput = textInputRef ?? ReportActionComposeFocusManager.composerRef.current; + const textInput = textInputRef ?? ReportActionComposeFocusManager.composerRef.current; - if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { - return; - } + if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { + return; + } - if (!shouldDelay) { - textInput.focus(); + if (!shouldDelay) { + textInput.focus(); + return; + } + ComposerFocusManager.isReadyToFocus().then(() => { + if (!textInput) { return; } - ComposerFocusManager.isReadyToFocus().then(() => { - if (!textInput) { - return; - } - textInput.focus(); - }); + textInput.focus(); }); }; } diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 831b32def2bb..1fd00a7f3813 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -1,6 +1,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import type {MutableRefObject} from 'react'; import React from 'react'; +import {InteractionManager} from 'react-native'; import type {GestureResponderEvent} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {Emoji} from '@assets/emojis/types'; @@ -194,7 +195,9 @@ const ContextMenuActions: ContextMenuAction[] = [ onPress: (closePopover, {reportAction, reportID}) => { if (closePopover) { hideContextMenu(false, () => { - ReportActionComposeFocusManager.focus(); + InteractionManager.runAfterInteractions(() => { + ReportActionComposeFocusManager.focus(); + }); Report.navigateToAndOpenChildReport(reportAction?.childReportID ?? '0', reportAction, reportID); }); return; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index b6b76a77f44c..4926bc6b7659 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -581,7 +581,7 @@ function ComposerWithSuggestions( * @param [shouldDelay=false] Impose delay before focusing the composer */ const focus = useCallback((shouldDelay = false) => { - focusComposerWithDelay()(shouldDelay); + focusComposerWithDelay(null)(shouldDelay); }, []); const setUpComposeFocusManager = useCallback(() => { @@ -725,7 +725,6 @@ function ComposerWithSuggestions( <> Date: Thu, 7 Mar 2024 22:33:32 +0300 Subject: [PATCH 03/12] pass text input ref --- src/libs/focusComposerWithDelay.ts | 3 +-- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index 4909c4c0a4ea..958b13855008 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -1,7 +1,6 @@ import type {TextInput} from 'react-native'; import * as EmojiPickerAction from './actions/EmojiPickerAction'; import ComposerFocusManager from './ComposerFocusManager'; -import ReportActionComposeFocusManager from './ReportActionComposeFocusManager'; type FocusComposerWithDelay = (shouldDelay?: boolean) => void; /** @@ -15,7 +14,7 @@ function focusComposerWithDelay(textInputRef: TextInput | null): FocusComposerWi return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - const textInput = textInputRef ?? ReportActionComposeFocusManager.composerRef.current; + const textInput = textInputRef; if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 4926bc6b7659..af2d0b9eab56 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -581,7 +581,7 @@ function ComposerWithSuggestions( * @param [shouldDelay=false] Impose delay before focusing the composer */ const focus = useCallback((shouldDelay = false) => { - focusComposerWithDelay(null)(shouldDelay); + focusComposerWithDelay(textInputRef.current)(shouldDelay); }, []); const setUpComposeFocusManager = useCallback(() => { From 69e6022b79b61e8c82c6d98d7581ff2ec5e807f7 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 7 Mar 2024 22:43:34 +0300 Subject: [PATCH 04/12] revert ref variable change --- src/libs/focusComposerWithDelay.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index 958b13855008..7ee342d0cce4 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -6,7 +6,7 @@ type FocusComposerWithDelay = (shouldDelay?: boolean) => void; /** * Create a function that focuses the composer. */ -function focusComposerWithDelay(textInputRef: TextInput | null): FocusComposerWithDelay { +function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithDelay { /** * Focus the text input * @param [shouldDelay] Impose delay before focusing the text input @@ -14,7 +14,6 @@ function focusComposerWithDelay(textInputRef: TextInput | null): FocusComposerWi return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - const textInput = textInputRef; if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; From 78d815b9b4cc94f5a9a77327699f435051c5db31 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 20 Mar 2024 23:54:44 +0300 Subject: [PATCH 05/12] minor fix --- src/libs/focusComposerWithDelay.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index 7ee342d0cce4..c8b0a390f89a 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -18,7 +18,6 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } - if (!shouldDelay) { textInput.focus(); return; From 1b9163c70d17bd5d5286f8a1974fdd2c432534ae Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 20 Mar 2024 23:55:43 +0300 Subject: [PATCH 06/12] minor fix --- src/libs/focusComposerWithDelay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index c8b0a390f89a..d01dfd662e1a 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -14,7 +14,6 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } @@ -22,6 +21,7 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD textInput.focus(); return; } + ComposerFocusManager.isReadyToFocus().then(() => { if (!textInput) { return; From aa4fe300293fe42d0eb13e0f68bebb6dc02c5a8f Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 20 Mar 2024 23:56:45 +0300 Subject: [PATCH 07/12] minor fix --- src/libs/focusComposerWithDelay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index d01dfd662e1a..c8b0a390f89a 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -14,6 +14,7 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. + if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } @@ -21,7 +22,6 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD textInput.focus(); return; } - ComposerFocusManager.isReadyToFocus().then(() => { if (!textInput) { return; From 4c3483018962f4509294a616df823c5a6872c015 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 20 Mar 2024 23:59:24 +0300 Subject: [PATCH 08/12] minor fix --- src/libs/focusComposerWithDelay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/focusComposerWithDelay.ts b/src/libs/focusComposerWithDelay.ts index c8b0a390f89a..6a2f85f7d311 100644 --- a/src/libs/focusComposerWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -14,10 +14,10 @@ function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithD return (shouldDelay = false) => { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. - if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } + if (!shouldDelay) { textInput.focus(); return; From 2bf777e96f3e5910e69d974fa8a352c49f947633 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Tue, 26 Mar 2024 15:52:52 +0300 Subject: [PATCH 09/12] fix auto focus for natives --- src/libs/ReportActionComposeFocusManager.ts | 6 +++--- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 2 +- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 64e4530e0fe5..7e387d807229 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -3,7 +3,7 @@ import type {TextInput} from 'react-native'; import ROUTES from '@src/ROUTES'; import Navigation from './Navigation/Navigation'; -type FocusCallback = () => void; +type FocusCallback = (shouldFocusForNative?: boolean) => void; const composerRef = React.createRef(); const editComposerRef = React.createRef(); @@ -29,7 +29,7 @@ function onComposerFocus(callback: FocusCallback | null, isMainComposer = false) /** * Request focus on the ReportActionComposer */ -function focus() { +function focus(shouldFocusForNative?: boolean) { /** Do not trigger the refocusing when the active route is not the report route, */ if (!Navigation.isActiveRoute(ROUTES.REPORT_WITH_ID.getRoute(Navigation.getTopmostReportId() ?? ''))) { return; @@ -40,7 +40,7 @@ function focus() { return; } - mainComposerFocusCallback(); + mainComposerFocusCallback(shouldFocusForNative); return; } diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index a270905256d6..d640b3cc6131 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -201,7 +201,7 @@ const ContextMenuActions: ContextMenuAction[] = [ if (closePopover) { hideContextMenu(false, () => { InteractionManager.runAfterInteractions(() => { - ReportActionComposeFocusManager.focus(); + ReportActionComposeFocusManager.focus(true); }); Report.navigateToAndOpenChildReport(reportAction?.childReportID ?? '0', reportAction, reportID); }); diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 2f9daa117273..d334d46eaa24 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -602,8 +602,8 @@ function ComposerWithSuggestions( const setUpComposeFocusManager = useCallback(() => { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. - ReportActionComposeFocusManager.onComposerFocus(() => { - if (!willBlurTextInputOnTapOutside || !isFocused) { + ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNative = false) => { + if ((!willBlurTextInputOnTapOutside && !shouldFocusForNative) || !isFocused) { return; } From c27d74eba12daac113f252775bae0e50059546af Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 3 Apr 2024 12:02:57 +0300 Subject: [PATCH 10/12] Updated comment --- src/components/Composer/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 57e56c9a57ea..035f54dde7ec 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -388,9 +388,9 @@ function Composer( if (isReportActionCompose) { ReportActionComposeFocusManager.onComposerFocus(null); } else { - // While a user was editing a comment and if they open on LHN menu we want the focus to return - // to the ReportActionItemMessageEdit compose after they click on the menu (for e.g. mark as read) - // so we assign the focus callback here. + // While a user edits a comment, if they open the LHN menu, we want to ensure that + // the focus returns to the message edit composer after they click on a menu item (e.g. mark as read). + // To achieve this, we re-assign the focus callback here. ReportActionComposeFocusManager.onComposerFocus(() => { if (!textInput.current) { return; From 4a40236d1888229a6d0cfbe45bc58087c0a966a3 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 3 Apr 2024 12:15:28 +0300 Subject: [PATCH 11/12] added comment --- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index bd0c8ad76e4a..b9af592433b9 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -202,6 +202,8 @@ const ContextMenuActions: ContextMenuAction[] = [ if (closePopover) { hideContextMenu(false, () => { InteractionManager.runAfterInteractions(() => { + // Normally the focus callback of the main composer doesn't focus for natives, + // so we need to pass true here to allow focusing for natives too. ReportActionComposeFocusManager.focus(true); }); Report.navigateToAndOpenChildReport(reportAction?.childReportID ?? '0', reportAction, reportID); From 6fd4517e3b5598393d038cc4c44ce92899ae362c Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 5 Apr 2024 17:53:11 +0300 Subject: [PATCH 12/12] changed variable names --- src/libs/ReportActionComposeFocusManager.ts | 6 +++--- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 4 ++-- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 7e387d807229..11c1fd04329f 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -3,7 +3,7 @@ import type {TextInput} from 'react-native'; import ROUTES from '@src/ROUTES'; import Navigation from './Navigation/Navigation'; -type FocusCallback = (shouldFocusForNative?: boolean) => void; +type FocusCallback = (shouldFocusForNonBlurInputOnTapOutside?: boolean) => void; const composerRef = React.createRef(); const editComposerRef = React.createRef(); @@ -29,7 +29,7 @@ function onComposerFocus(callback: FocusCallback | null, isMainComposer = false) /** * Request focus on the ReportActionComposer */ -function focus(shouldFocusForNative?: boolean) { +function focus(shouldFocusForNonBlurInputOnTapOutside?: boolean) { /** Do not trigger the refocusing when the active route is not the report route, */ if (!Navigation.isActiveRoute(ROUTES.REPORT_WITH_ID.getRoute(Navigation.getTopmostReportId() ?? ''))) { return; @@ -40,7 +40,7 @@ function focus(shouldFocusForNative?: boolean) { return; } - mainComposerFocusCallback(shouldFocusForNative); + mainComposerFocusCallback(shouldFocusForNonBlurInputOnTapOutside); return; } diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 8294ba8d4847..4aba9e43b1c0 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -202,8 +202,8 @@ const ContextMenuActions: ContextMenuAction[] = [ if (closePopover) { hideContextMenu(false, () => { InteractionManager.runAfterInteractions(() => { - // Normally the focus callback of the main composer doesn't focus for natives, - // so we need to pass true here to allow focusing for natives too. + // Normally the focus callback of the main composer doesn't focus when willBlurTextInputOnTapOutside + // is false, so we need to pass true here to override this condition. ReportActionComposeFocusManager.focus(true); }); Report.navigateToAndOpenChildReport(reportAction?.childReportID ?? '0', reportAction, reportID); diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index c2001229d89b..f8147dfda81d 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -591,8 +591,8 @@ function ComposerWithSuggestions( const setUpComposeFocusManager = useCallback(() => { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. - ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNative = false) => { - if ((!willBlurTextInputOnTapOutside && !shouldFocusForNative) || !isFocused) { + ReportActionComposeFocusManager.onComposerFocus((shouldFocusForNonBlurInputOnTapOutside = false) => { + if ((!willBlurTextInputOnTapOutside && !shouldFocusForNonBlurInputOnTapOutside) || !isFocused) { return; }