fix dropdown fold issue on message tab

src/components/ActionMenu/index.js

@@ -161,6 +161,7 @@ export default class ActionMenu extends Component {
 
   render() {
     const {
+      reference,
       className,
       currentLocale,
       onLog,
@@ -261,6 +262,7 @@ export default class ActionMenu extends Component {
       // slide menu
       return (
         <div
+          ref={reference}
           onClick={this.captureClick}>
           <SlideMenu
             className={classnames(styles.root, className)}
@@ -285,6 +287,7 @@ export default class ActionMenu extends Component {
     // no slide menu
     return (
       <div
+        ref={reference}
         onClick={this.captureClick} >
         <div className={classnames(styles.root, className)}>
           {clickToDialButton}
@@ -299,6 +302,7 @@ export default class ActionMenu extends Component {
 }
 
 ActionMenu.propTypes = {
+  reference: PropTypes.func,
   className: PropTypes.string,
   currentLocale: PropTypes.string.isRequired,
   onLog: PropTypes.func,
@@ -323,6 +327,7 @@ ActionMenu.propTypes = {
   viewEntityTitle: PropTypes.string,
 };
 ActionMenu.defaultProps = {
+  reference: undefined,
   className: undefined,
   onLog: undefined,
   isLogged: false,

src/components/ContactDisplay/index.js

@@ -35,6 +35,7 @@ const displayFomatter = ({
 };
 
 export default function ContactDisplay({
+  reference,
   className,
   contactMatches,
   selected,
@@ -139,6 +140,7 @@ export default function ContactDisplay({
   }
   return (
     <div
+      ref={reference}
       className={classnames(
         styles.root,
         className,
@@ -148,6 +150,7 @@ export default function ContactDisplay({
   );
 }
 ContactDisplay.propTypes = {
+  reference: PropTypes.func,
   className: PropTypes.string,
   contactMatches: PropTypes.arrayOf(PropTypes.any).isRequired,
   selected: PropTypes.number.isRequired,
@@ -168,6 +171,7 @@ ContactDisplay.propTypes = {
   stopPropagation: PropTypes.bool,
 };
 ContactDisplay.defaultProps = {
+  reference: undefined,
   className: undefined,
   onSelectContact: undefined,
   fallBackName: '',

src/components/MessageItem/index.js

@@ -182,6 +182,12 @@ export default class MessageItem extends Component {
     //   delete e.captureClick;
     //   return;
     // }
+    if (
+      this.contactDisplay.contains(e.target) ||
+      this.actionMenu.contains(e.target)
+    ) {
+      return;
+    }
     this.props.showConversationDetail(this.props.conversation.conversationId);
   }
 
@@ -227,6 +233,7 @@ export default class MessageItem extends Component {
           groupConversationTitle={i18n.getString('groupConversation', currentLocale)}
         />
         <ContactDisplay
+          reference={(ref) => { this.contactDisplay = ref; }}
           className={classnames(
             styles.contactDisplay,
             unreadCounts && styles.unread
@@ -243,11 +250,13 @@ export default class MessageItem extends Component {
           groupNumbers={groupNumbers}
           currentLocale={currentLocale}
           enableContactFallback={enableContactFallback}
+          stopPropagation={false}
         />
         <div className={styles.details}>
           {dateTimeFormatter({ utcTimestamp: creationTime })} | {subject}
         </div>
         <ActionMenu
+          reference={(ref) => { this.actionMenu = ref; }}
           currentLocale={currentLocale}
           onLog={onLogConversation && this.logConversation}
           onViewEntity={onViewContact && this.viewSelectedContact}
@@ -265,7 +274,7 @@ export default class MessageItem extends Component {
           callTitle={i18n.getString('call', currentLocale)}
           createEntityTitle={i18n.getString('addEntity', currentLocale)}
           viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
-          stopPropagation
+          stopPropagation={false}
         />
       </div>
     );