Prevent hiding the context menu by clicking away to also potentially select messages

js/models/messages.js

@@ -127,6 +127,7 @@
       }
 
       this.selected = false;
+      window.contextMenuShown = false;
 
       generateProps();
     },
@@ -657,6 +658,7 @@
 
         onCopyText: () => this.copyText(),
         onSelectMessage: () => this.selectMessage(),
+        onSelectMessageUnchecked: () => this.selectMessageUnchecked(),
         onCopyPubKey: () => this.copyPubKey(),
         onReply: () => this.trigger('reply', this),
         onRetrySend: () => this.retrySend(),
@@ -801,7 +803,7 @@
       const isFromMe = contact ? contact.id === this.OUR_NUMBER : false;
       const onClick = noClick
         ? null
-        : (event) => {
+        : event => {
             event.stopPropagation();
             this.trigger('scroll-to-message', {
               author,
@@ -966,7 +968,8 @@
       });
     },
 
-    selectMessage() {
+    // Select message even if the context menu is shown
+    selectMessageUnchecked() {
       this.selected = !this.selected;
 
       const convo = this.getConversation();
@@ -980,6 +983,15 @@
       this.trigger('change');
     },
 
+    selectMessage() {
+      // Disable message selection when the context menu is displayed
+      if (window.contextMenuShown) {
+        return;
+      }
+
+      this.selectMessageUnchecked();
+    },
+
     copyText() {
       clipboard.writeText(this.get('body'));
       window.Whisper.events.trigger('showToast', {

ts/components/conversation/Message.tsx

@@ -35,6 +35,7 @@ import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 declare global {
   interface Window {
     shortenPubkey: any;
+    contextMenuShown: boolean;
   }
 }
 
@@ -105,6 +106,7 @@ export interface Props {
   onClickLinkPreview?: (url: string) => void;
   onCopyText?: () => void;
   onSelectMessage: () => void;
+  onSelectMessageUnchecked: () => void;
   onReply?: () => void;
   onRetrySend?: () => void;
   onDownload?: (isDangerous: boolean) => void;
@@ -847,7 +849,7 @@ export class Message extends React.PureComponent<Props, State> {
     const {
       attachments,
       onCopyText,
-      onSelectMessage,
+      onSelectMessageUnchecked,
       direction,
       status,
       isDeletable,
@@ -876,8 +878,27 @@ export class Message extends React.PureComponent<Props, State> {
       }
     };
 
+    const onContextMenuShown = () => {
+      window.contextMenuShown = true;
+    };
+
+    const onContextMenuHidden = () => {
+      // This function will called before the click event
+      // on the message would trigger (and I was unable to
+      // prevent propagation in this case), so use a short timeout
+      setTimeout(() => {
+        window.contextMenuShown = false;
+      }, 100);
+    };
+
+    // CONTEXT MENU "Select Message" does not work
+
     return (
-      <ContextMenu id={triggerId}>
+      <ContextMenu
+        id={triggerId}
+        onShow={onContextMenuShown}
+        onHide={onContextMenuHidden}
+      >
         {!multipleAttachments && attachments && attachments[0] ? (
           <MenuItem
             attributes={{
@@ -895,7 +916,7 @@ export class Message extends React.PureComponent<Props, State> {
         ) : null}
 
         <MenuItem onClick={wrap(onCopyText)}>{i18n('copyMessage')}</MenuItem>
-        <MenuItem onClick={wrap(onSelectMessage)}>
+        <MenuItem onClick={wrap(onSelectMessageUnchecked)}>
           {i18n('selectMessage')}
         </MenuItem>
         <MenuItem