diff --git a/src/libs/focusWithDelay.ts b/src/libs/focusComposerWithDelay.ts similarity index 69% rename from src/libs/focusWithDelay.ts rename to src/libs/focusComposerWithDelay.ts index 00d0e915879e..94eb168328aa 100644 --- a/src/libs/focusWithDelay.ts +++ b/src/libs/focusComposerWithDelay.ts @@ -1,11 +1,12 @@ import {InteractionManager, TextInput} from 'react-native'; +import * as EmojiPickerAction from './actions/EmojiPickerAction'; import ComposerFocusManager from './ComposerFocusManager'; -type FocusWithDelay = (shouldDelay?: boolean) => void; +type FocusComposerWithDelay = (shouldDelay?: boolean) => void; /** - * Create a function that focuses a text input. + * Create a function that focuses the composer. */ -function focusWithDelay(textInput: TextInput | null): FocusWithDelay { +function focusComposerWithDelay(textInput: TextInput | null): FocusComposerWithDelay { /** * Focus the text input * @param [shouldDelay] Impose delay before focusing the text input @@ -14,7 +15,7 @@ function focusWithDelay(textInput: TextInput | null): FocusWithDelay { // There could be other animations running while we trigger manual focus. // This prevents focus from making those animations janky. InteractionManager.runAfterInteractions(() => { - if (!textInput) { + if (!textInput || EmojiPickerAction.isEmojiPickerVisible()) { return; } @@ -32,4 +33,4 @@ function focusWithDelay(textInput: TextInput | null): FocusWithDelay { }; } -export default focusWithDelay; +export default focusComposerWithDelay; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index b7013fe4ff2f..a254ca8b0d83 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -17,7 +17,7 @@ import * as ComposerUtils from '@libs/ComposerUtils'; import getDraftComment from '@libs/ComposerUtils/getDraftComment'; import convertToLTRForComposer from '@libs/convertToLTRForComposer'; import * as EmojiUtils from '@libs/EmojiUtils'; -import focusWithDelay from '@libs/focusWithDelay'; +import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; @@ -394,7 +394,7 @@ function ComposerWithSuggestions({ * @memberof ReportActionCompose */ const focus = useCallback((shouldDelay = false) => { - focusWithDelay(textInputRef.current)(shouldDelay); + focusComposerWithDelay(textInputRef.current)(shouldDelay); }, []); const setUpComposeFocusManager = useCallback(() => { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 589b4c367c25..b3efb0388364 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -20,7 +20,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; import * as EmojiUtils from '@libs/EmojiUtils'; -import focusWithDelay from '@libs/focusWithDelay'; +import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import onyxSubscribe from '@libs/onyxSubscribe'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; @@ -358,7 +358,7 @@ function ReportActionItemMessageEdit(props) { /** * Focus the composer text input */ - const focus = focusWithDelay(textInputRef.current); + const focus = focusComposerWithDelay(textInputRef.current); return ( <> @@ -432,10 +432,7 @@ function ReportActionItemMessageEdit(props) { { - setIsFocused(true); - focus(true); - }} + onModalHide={() => focus(true)} onEmojiSelected={addEmojiToTextBox} nativeID={emojiButtonID} emojiPickerID={props.action.reportActionID}