Disable the focus trap for report page context menu

src/components/PressableWithSecondaryInteraction/index.js

@@ -34,6 +34,17 @@ class PressableWithSecondaryInteraction extends Component {
         if (this.props.preventDefaultContentMenu) {
             e.preventDefault();
         }
+
+        /**
+         * This component prevents the tapped element from capturing focus.
+         * We need to blur this element when clicked as it opens modal that implements focus-trapping.
+         * When the modal is closed it focuses back to the last active element.
+         * Therefore it shifts the element to bring it back to focus.
+         * https://github.com/Expensify/App/issues/14148
+        */
+        if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
+            this.pressableRef.blur();
+        }
         this.props.onSecondaryInteraction(e);
     }
 
@@ -49,6 +60,9 @@ class PressableWithSecondaryInteraction extends Component {
                     if (DeviceCapabilities.hasHoverSupport()) {
                         return;
                     }
+                    if (this.props.withoutFocusOnSecondaryInteraction && this.pressableRef) {
+                        this.pressableRef.blur();
+                    }
                     this.props.onSecondaryInteraction(e);
                 }}
                 onPressOut={this.props.onPressOut}

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -31,6 +31,9 @@ const propTypes = {
      * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
      */
     inline: PropTypes.bool,
+
+    /** Disable focus trap for the element on secondary interaction  */
+    withoutFocusOnSecondaryInteraction: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -39,6 +42,7 @@ const defaultProps = {
     onPressOut: () => {},
     preventDefaultContentMenu: true,
     inline: false,
+    withoutFocusOnSecondaryInteraction: false,
 };
 
 export {propTypes, defaultProps};

src/pages/home/report/ReportActionItem.js

@@ -211,6 +211,7 @@ class ReportActionItem extends Component {
                 onPressOut={() => ControlSelection.unblock()}
                 onSecondaryInteraction={this.showPopover}
                 preventDefaultContentMenu={!this.props.draftMessage}
+                withoutFocusOnSecondaryInteraction
             >
                 <Hoverable>
                     {hovered => (