Merge pull request #27733 from DylanDylann/fix/26431-focus-border-is-…

…not-disappearing-on-click

Fix/26431:  Web focus border is not disappearing on click

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) {
             <PressableWithoutFeedback
                 ref={props.innerRef}
                 onPress={props.onPress}
-                onMouseDown={(e) => e.preventDefault()}
+                onMouseDown={(e) => {
+                    if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) {
+                        DomUtils.getActiveElement().blur();
+                        return;
+                    }
+
+                    e.preventDefault();
+                }}
                 accessibilityLabel={props.tooltipText}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,

src/libs/ReportActionComposeFocusManager.ts

@@ -4,6 +4,7 @@ import {TextInput} from 'react-native';
 type FocusCallback = () => void;
 
 const composerRef = React.createRef<TextInput>();
+const editComposerRef = React.createRef<TextInput>();
 // 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,
 };

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -370,6 +370,7 @@ function ReportActionItemMessageEdit(props) {
                         <Composer
                             multiline
                             ref={(el) => {
+                                ReportActionComposeFocusManager.editComposerRef.current = el;
                                 textInputRef.current = el;
                                 // eslint-disable-next-line no-param-reassign
                                 props.forwardedRef.current = el;