close all dialogs on ESC or click outside

js/views/session_confirm_view.js

@@ -24,6 +24,17 @@
       };
     },
 
+    registerEvents() {
+      this.unregisterEvents();
+      document.addEventListener('mousedown', this.props.onClickClose, false);
+      document.addEventListener('keyup', this.props.onClickClose, false);
+    },
+
+    unregisterEvents() {
+      document.removeEventListener('mousedown', this.props.onClickClose, false);
+      document.removeEventListener('keyup', this.props.onClickClose, false);
+    },
+
     render() {
       this.$('.session-confirm-wrapper').remove();
 
@@ -32,25 +43,29 @@
         Component: window.Signal.Components.SessionConfirm,
         props: this.props,
       });
+      this.registerEvents();
 
       this.$el.prepend(this.confirmView.el);
     },
 
     ok() {
       this.$('.session-confirm-wrapper').remove();
+      this.unregisterEvents();
       if (this.props.resolve) {
         this.props.resolve();
       }
     },
     cancel() {
       this.$('.session-confirm-wrapper').remove();
+      this.unregisterEvents();
       if (this.props.reject) {
         this.props.reject();
       }
     },
     onKeyup(event) {
       if (event.key === 'Escape' || event.key === 'Esc') {
-        this.cancel();
+        this.unregisterEvents();
+        this.props.onClickClose();
       }
     },
   });

ts/components/session/SessionModal.tsx

@@ -36,6 +36,8 @@ export class SessionModal extends React.PureComponent<Props, State> {
     headerReverse: false,
   };
 
+  private node: HTMLDivElement | null;
+
   constructor(props: any) {
     super(props);
     this.state = {
@@ -44,10 +46,27 @@ export class SessionModal extends React.PureComponent<Props, State> {
 
     this.close = this.close.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.node = null;
 
     window.addEventListener('keyup', this.onKeyUp);
   }
 
+  public componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
+  }
+
+  public handleClick = (e: any) => {
+    if (this.node && this.node.contains(e.target)) {
+      return;
+    }
+
+    this.close();
+  };
+
   public render() {
     const {
       title,
@@ -59,7 +78,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
     const { isVisible } = this.state;
 
     return isVisible ? (
-      <div className={'session-modal'}>
+      <div ref={node => (this.node = node)} className={'session-modal'}>
         {showHeader ? (
           <>
             <div