Fix: Redundant context menu on error report action item

src/components/PressableWithSecondaryInteraction/index.js

@@ -31,7 +31,7 @@ class PressableWithSecondaryInteraction extends Component {
      */
     executeSecondaryInteractionOnContextMenu(e) {
         e.stopPropagation();
-        if (this.props.preventDefaultContentMenu) {
+        if (this.props.preventDefaultContextMenu) {
             e.preventDefault();
         }
 

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -20,7 +20,7 @@ const propTypes = {
     forwardedRef: PropTypes.func,
 
     /** Prevent the default ContextMenu on web/Desktop */
-    preventDefaultContentMenu: PropTypes.bool,
+    preventDefaultContextMenu: PropTypes.bool,
 
     /** Use Text instead of Pressable to create inline layout.
      * It has few limitations in comparison to Pressable.
@@ -40,7 +40,7 @@ const defaultProps = {
     forwardedRef: () => {},
     onPressIn: () => {},
     onPressOut: () => {},
-    preventDefaultContentMenu: true,
+    preventDefaultContextMenu: true,
     inline: false,
     withoutFocusOnSecondaryInteraction: false,
 };

src/pages/home/report/ReportActionItem.js

@@ -139,8 +139,8 @@ class ReportActionItem extends Component {
      * @param {Object} [event] - A press event.
      */
     showPopover(event) {
-        // Block menu on the message being Edited
-        if (this.props.draftMessage) {
+        // Block menu on the message being Edited or if the report action item has errors
+        if (this.props.draftMessage || !_.isEmpty(this.props.action.errors)) {
             return;
         }
 
@@ -255,6 +255,7 @@ class ReportActionItem extends Component {
             return <ChronosOOOListActions action={this.props.action} reportID={this.props.report.reportID} />;
         }
 
+        const hasErrors = !_.isEmpty(this.props.action.errors);
         const whisperedTo = lodashGet(this.props.action, 'whisperedTo', []);
         const isWhisper = whisperedTo.length > 0;
         const isMultipleParticipant = whisperedTo.length > 1;
@@ -268,7 +269,7 @@ class ReportActionItem extends Component {
                 onPressIn={() => this.props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                 onPressOut={() => ControlSelection.unblock()}
                 onSecondaryInteraction={this.showPopover}
-                preventDefaultContentMenu={!this.props.draftMessage}
+                preventDefaultContextMenu={!this.props.draftMessage && !hasErrors}
                 withoutFocusOnSecondaryInteraction
             >
                 <Hoverable>
@@ -343,6 +344,7 @@ class ReportActionItem extends Component {
                                 isVisible={
                                     hovered
                                     && !this.props.draftMessage
+                                    && !hasErrors
                                 }
                                 draftMessage={this.props.draftMessage}
                                 isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}