fix(modal): buggy click handlers to close modal on outside click

uploadcare · Oct 31, 2023 · b808643 · b808643
1 parent 141f1ed
commit b808643
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
@@ -27,8 +27,14 @@ export class Modal extends Block {
   };
 
   /** @param {Event} e */
-  _handleDialogPointerUp = (e) => {
-    if (e.target === this.ref.dialog) {
+  _handleDialogMouseDown = (e) => {
+    /** @private */
+    this._mouseDownTarget = e.target;
+  };
+
+  /** @param {Event} e */
+  _handleDialogMouseUp = (e) => {
+    if (e.target === this.ref.dialog && e.target === this._mouseDownTarget) {
       this._closeDialog();
     }
   };
@@ -53,7 +59,8 @@ export class Modal extends Block {
     super.initCallback();
     if (typeof HTMLDialogElement === 'function') {
       this.ref.dialog.addEventListener('close', this._handleDialogClose);
-      this.ref.dialog.addEventListener('pointerup', this._handleDialogPointerUp);
+      this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
+      this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
     } else {
       this.setAttribute('dialog-fallback', '');
       let backdrop = document.createElement('div');
@@ -95,7 +102,8 @@ export class Modal extends Block {
     super.destroyCallback();
     document.body.style.overflow = '';
     this.ref.dialog.removeEventListener('close', this._handleDialogClose);
-    this.ref.dialog.removeEventListener('click', this._handleDialogPointerUp);
+    this.ref.dialog.removeEventListener('mousedown', this._handleDialogMouseDown);
+    this.ref.dialog.removeEventListener('mouseup', this._handleDialogMouseUp);
   }
 }