Fix modals not closing properly when the outside is clicked (#967)

3 files changed, 32 insertions, 16 deletions

diff --git a/ext/bg/js/settings/modal-controller.js b/ext/bg/js/settings/modal-controller.js
index d604b050..8e551564 100644
--- a/ext/bg/js/settings/modal-controller.js
+++ b/ext/bg/js/settings/modal-controller.js
@@ -26,20 +26,13 @@ class ModalController {
     }
 
     prepare() {
-        for (const node of document.querySelectorAll('.modal')) {
+        for (const node of document.querySelectorAll('.modal,.modal-container')) {
             const {id} = node;
             const modal = new Modal(node);
+            modal.prepare();
             this._modalMap.set(id, modal);
             this._modals.push(modal);
         }
-
-        for (const node of document.querySelectorAll('.modal-container')) {
-            const {id} = node;
-            const modal = new Modal(node);
-            this._modalMap.set(id, modal);
-            this._modals.push(modal);
-            node.addEventListener('click', this._onModalContainerClick.bind(this, modal), false);
-        }
     }
 
     getModal(name) {
@@ -56,11 +49,4 @@ class ModalController {
         }
         return null;
     }
-
-    // Private
-
-    _onModalContainerClick(modal, e) {
-        if (e.currentTarget !== e.target) { return; }
-        modal.setVisible(false);
-    }
 }
diff --git a/ext/bg/js/settings/modal-jquery.js b/ext/bg/js/settings/modal-jquery.js
index 7c8e0de9..a35da1af 100644
--- a/ext/bg/js/settings/modal-jquery.js
+++ b/ext/bg/js/settings/modal-jquery.js
@@ -26,6 +26,10 @@ class Modal extends EventDispatcher {
         return this._node;
     }
 
+    prepare() {
+        // NOP
+    }
+
     isVisible() {
         return !!(this._getWrappedNode().data('bs.modal') || {}).isShown;
     }
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index 28f9883e..4b4a0e17 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -112,6 +112,32 @@ class Modal extends PopupElement {
             closingClassName: 'modal-container-closing',
             closingAnimationDuration: 375 // Milliseconds; includes buffer
         });
+        this._canCloseOnClick = false;
+    }
+
+    prepare() {
+        const node = this._node;
+        node.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
+        node.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
+        node.addEventListener('click', this._onModalContainerClick.bind(this), false);
+    }
+
+    // Private
+
+    _onModalContainerMouseDown(e) {
+        this._canCloseOnClick = (e.currentTarget === e.target);
+    }
+
+    _onModalContainerMouseUp(e) {
+        if (!this._canCloseOnClick) { return; }
+        this._canCloseOnClick = (e.currentTarget === e.target);
+    }
+
+    _onModalContainerClick(e) {
+        if (!this._canCloseOnClick) { return; }
+        this._canCloseOnClick = false;
+        if (e.currentTarget !== e.target) { return; }
+        this.setVisible(false);
     }
 }