diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js index ce03a8ed2..f5be20610 100644 --- a/js/views/session_confirm_view.js +++ b/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(); } }, }); diff --git a/ts/components/session/SessionModal.tsx b/ts/components/session/SessionModal.tsx index 1d4c45808..d4345fb76 100644 --- a/ts/components/session/SessionModal.tsx +++ b/ts/components/session/SessionModal.tsx @@ -36,6 +36,8 @@ export class SessionModal extends React.PureComponent { headerReverse: false, }; + private node: HTMLDivElement | null; + constructor(props: any) { super(props); this.state = { @@ -44,10 +46,27 @@ export class SessionModal extends React.PureComponent { 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 { const { isVisible } = this.state; return isVisible ? ( -
+
(this.node = node)} className={'session-modal'}> {showHeader ? ( <>