From d05c42a3979be30efc7a932c3c0f483098841b19 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Tue, 21 Jun 2022 11:03:57 +0300
Subject: [PATCH] fix: change dismiss handler, listening to key down, instead
 of click (#36401)

---
 js/src/modal.js             |  4 ++--
 js/tests/unit/modal.spec.js | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index d3f0540bb8b9..6efb13d9d585 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -30,7 +30,7 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`
 const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_RESIZE = `resize${EVENT_KEY}`
-const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
+const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
 const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
@@ -221,7 +221,7 @@ class Modal extends BaseComponent {
       }
     })
 
-    EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
+    EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => {
       if (event.target !== event.currentTarget) { // click is inside modal-dialog
         return
       }
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 318410a8c4c1..9e463d2be3bb 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -641,9 +641,10 @@ describe('Modal', () => {
 
         modalEl.addEventListener('shown.bs.modal', () => {
           const spy = spyOn(modal, '_queueCallback').and.callThrough()
+          const mouseDown = createEvent('mousedown')
 
-          modalEl.click()
-          modalEl.click()
+          modalEl.dispatchEvent(mouseDown)
+          modalEl.dispatchEvent(mouseDown)
 
           setTimeout(() => {
             expect(spy).toHaveBeenCalledTimes(1)
@@ -709,13 +710,19 @@ describe('Modal', () => {
         fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
         const modalEl = fixtureEl.querySelector('.modal')
+        const dialogEl = modalEl.querySelector('.modal-dialog')
         const modal = new Modal(modalEl)
+
+        spyOn(modal, 'hide')
+
         modalEl.addEventListener('shown.bs.modal', () => {
-          modalEl.click()
-        })
+          const mouseDown = createEvent('mousedown')
 
-        modalEl.addEventListener('hidden.bs.modal', () => {
-          expect(document.querySelector('.modal-backdrop')).toBeNull()
+          dialogEl.dispatchEvent(mouseDown)
+          expect(modal.hide).not.toHaveBeenCalled()
+
+          modalEl.dispatchEvent(mouseDown)
+          expect(modal.hide).toHaveBeenCalled()
           resolve()
         })