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

This commit is contained in:
toasted-nutbread 2020-10-28 20:45:50 -04:00 committed by GitHub
parent 25cedc8c52
commit 890de095db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 16 deletions

View File

@ -26,20 +26,13 @@ class ModalController {
} }
prepare() { prepare() {
for (const node of document.querySelectorAll('.modal')) { for (const node of document.querySelectorAll('.modal,.modal-container')) {
const {id} = node; const {id} = node;
const modal = new Modal(node); const modal = new Modal(node);
modal.prepare();
this._modalMap.set(id, modal); this._modalMap.set(id, modal);
this._modals.push(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) { getModal(name) {
@ -56,11 +49,4 @@ class ModalController {
} }
return null; return null;
} }
// Private
_onModalContainerClick(modal, e) {
if (e.currentTarget !== e.target) { return; }
modal.setVisible(false);
}
} }

View File

@ -26,6 +26,10 @@ class Modal extends EventDispatcher {
return this._node; return this._node;
} }
prepare() {
// NOP
}
isVisible() { isVisible() {
return !!(this._getWrappedNode().data('bs.modal') || {}).isShown; return !!(this._getWrappedNode().data('bs.modal') || {}).isShown;
} }

View File

@ -112,6 +112,32 @@ class Modal extends PopupElement {
closingClassName: 'modal-container-closing', closingClassName: 'modal-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer 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);
} }
} }