diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index acf5d165d7c7..0e9085b54c17 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -8,6 +8,8 @@ import getButtonState from '../libs/getButtonState'; import variables from '../styles/variables'; import Tooltip from './Tooltip'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import ReportActionComposeFocusManager from '../libs/ReportActionComposeFocusManager'; +import DomUtils from '../libs/DomUtils'; const propTypes = { /** @@ -53,7 +55,14 @@ function BaseMiniContextMenuItem(props) { e.preventDefault()} + onMouseDown={(e) => { + if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) { + DomUtils.getActiveElement().blur(); + return; + } + + e.preventDefault(); + }} accessibilityLabel={props.tooltipText} style={({hovered, pressed}) => [ styles.reportActionContextMenuMiniButton, diff --git a/src/libs/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index 83493ed71fc5..ca4f9d77898b 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -4,6 +4,7 @@ import {TextInput} from 'react-native'; type FocusCallback = () => void; const composerRef = React.createRef(); +const editComposerRef = React.createRef(); // There are two types of composer: general composer (edit composer) and main composer. // The general composer callback will take priority if it exists. let focusCallback: FocusCallback | null = null; @@ -57,10 +58,19 @@ function isFocused(): boolean { return !!composerRef.current?.isFocused(); } +/** + * Exposes the current focus state of the edit message composer. + */ +function isEditFocused(): boolean { + return !!editComposerRef.current?.isFocused(); +} + export default { composerRef, onComposerFocus, focus, clear, isFocused, + editComposerRef, + isEditFocused, }; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 43ff5c00a4d5..6ce826a2a34c 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -370,6 +370,7 @@ function ReportActionItemMessageEdit(props) { { + ReportActionComposeFocusManager.editComposerRef.current = el; textInputRef.current = el; // eslint-disable-next-line no-param-reassign props.forwardedRef.current = el;