Fix composer is still focused when context menu is shown

src/components/FocusTrap/FocusTrapForModal/index.web.tsx

@@ -1,6 +1,7 @@
 import FocusTrap from 'focus-trap-react';
 import React from 'react';
 import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import type FocusTrapForModalProps from './FocusTrapForModalProps';
 
@@ -9,6 +10,7 @@ function FocusTrapForModal({children, active, initialFocus = false}: FocusTrapFo
         <FocusTrap
             active={active}
             focusTrapOptions={{
+                onActivate: blurActiveElement,
                 trapStack: sharedTrapStack,
                 clickOutsideDeactivates: true,
                 initialFocus,

src/libs/ReportActionComposeFocusManager.ts

@@ -82,14 +82,6 @@ function isEditFocused(): boolean {
     return !!editComposerRef.current?.isFocused();
 }
 
-/**
- * Utility function to blur both main composer and edit composer.
- */
-function blurAll(): void {
-    composerRef.current?.blur();
-    editComposerRef.current?.blur();
-}
-
 export default {
     composerRef,
     onComposerFocus,
@@ -98,5 +90,4 @@ export default {
     isFocused,
     editComposerRef,
     isEditFocused,
-    blurAll,
 };

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

@@ -111,7 +111,8 @@ function BaseReportActionContextMenu({
 }: BaseReportActionContextMenuProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const menuItemRefs = useRef<MenuItemRefs>({});
     const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
     const wrapperStyle = StyleUtils.getReportActionContextMenuStyles(isMini, shouldUseNarrowLayout);
@@ -301,7 +302,7 @@ function BaseReportActionContextMenu({
 
     return (
         (isVisible || shouldKeepOpen) && (
-            <FocusTrapForModal active={!isMini}>
+            <FocusTrapForModal active={!isMini && !isSmallScreenWidth}>
                 <View
                     ref={contentRef}
                     style={wrapperStyle}

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

@@ -336,7 +336,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
                 shoudSwitchPositionIfOverflow={shoudSwitchPositionIfOverflow}
             >
                 <BaseReportActionContextMenu
-                    isVisible
+                    isVisible={isPopoverVisible}
                     type={typeRef.current}
                     reportID={reportIDRef.current}
                     reportActionID={reportActionIDRef.current}

src/pages/home/report/ReportActionItem.tsx

@@ -49,7 +49,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import SelectionScraper from '@libs/SelectionScraper';
@@ -339,7 +338,6 @@ function ReportActionItem({
                 return;
             }
 
-            ReportActionComposeFocusManager.blurAll();
             setIsContextMenuActive(true);
             const selection = SelectionScraper.getCurrentSelection();
             ReportActionContextMenu.showContextMenu(