From 8949948cebbe84e9d29d6537321c6520caa567d1 Mon Sep 17 00:00:00 2001
From: Aleksandr Grenishin <nd0ut.me@gmail.com>
Date: Tue, 31 Oct 2023 12:44:58 +0300
Subject: [PATCH] fix(modal): buggy click handlers to close modal on outside
 click (#551)

---
 blocks/Modal/Modal.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
index c8ff20134..cd7e96c20 100644
--- 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');
@@ -94,8 +101,10 @@ export class Modal extends Block {
   destroyCallback() {
     super.destroyCallback();
     document.body.style.overflow = '';
+    this._mouseDownTarget = undefined;
     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);
   }
 }