make showUserDetails modal close on click outside

ts/components/UserDetailsDialog.tsx

@@ -18,6 +18,8 @@ interface Props {
 }
 
 export class UserDetailsDialog extends React.Component<Props> {
+  private modalRef: any;
+
   constructor(props: any) {
     super(props);
 
@@ -25,6 +27,15 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onClickStartConversation = this.onClickStartConversation.bind(this);
     window.addEventListener('keyup', this.onKeyUp);
+    this.modalRef = React.createRef();
+  }
+
+  public componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
   }
 
   public render() {
@@ -34,6 +45,7 @@ export class UserDetailsDialog extends React.Component<Props> {
     const startConversation = i18n('startConversation');
 
     return (
+      <div ref={element => (this.modalRef = element)}>
         <div className="content">
           <div className="avatar-center">
             <div className="avatar-center-inner">{this.renderAvatar()}</div>
@@ -55,6 +67,7 @@ export class UserDetailsDialog extends React.Component<Props> {
             </button>
           </div>
         </div>
+      </div>
     );
   }
 
@@ -98,4 +111,11 @@ export class UserDetailsDialog extends React.Component<Props> {
     this.props.onStartConversation();
     this.closeDialog();
   }
+
+  private readonly handleClick = (e: any) => {
+    if (this.modalRef.contains(e.target)) {
+      return;
+    }
+    this.closeDialog();
+  };
 }