From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Fri, 20 Nov 2020 13:36:24 +0000 (+0530)
Subject: Don't hide modal when keyboard is set to false in modal's configuration (#32179)
X-Git-Tag: v5.0.0-beta1~80
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0839cbf04dd9b94dc2f9806751660d921beb72e9;p=thirdparty%2Fbootstrap.git

Don't hide modal when keyboard is set to false in modal's configuration (#32179)

* Don't hide modal when config.keyboard is false

* Update unit test

- Modal should not be closed when pressing esc key if keyboard = false
  and backdrop is 'static'

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---

diff --git a/js/src/modal.js b/js/src/modal.js
index b220bfa945..4309cbd9a2 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -365,7 +365,11 @@ class Modal {
           return
         }
 
-        this._triggerBackdropTransition()
+        if (this._config.backdrop === 'static') {
+          this._triggerBackdropTransition()
+        } else {
+          this.hide()
+        }
       })
 
       if (animate) {
@@ -404,35 +408,31 @@ class Modal {
   }
 
   _triggerBackdropTransition() {
-    if (this._config.backdrop === 'static') {
-      const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
-      if (hideEvent.defaultPrevented) {
-        return
-      }
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+    if (hideEvent.defaultPrevented) {
+      return
+    }
 
-      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
 
+    if (!isModalOverflowing) {
+      this._element.style.overflowY = 'hidden'
+    }
+
+    this._element.classList.add(CLASS_NAME_STATIC)
+    const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
+    EventHandler.off(this._element, TRANSITION_END)
+    EventHandler.one(this._element, TRANSITION_END, () => {
+      this._element.classList.remove(CLASS_NAME_STATIC)
       if (!isModalOverflowing) {
-        this._element.style.overflowY = 'hidden'
+        EventHandler.one(this._element, TRANSITION_END, () => {
+          this._element.style.overflowY = ''
+        })
+        emulateTransitionEnd(this._element, modalTransitionDuration)
       }
-
-      this._element.classList.add(CLASS_NAME_STATIC)
-      const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
-      EventHandler.off(this._element, TRANSITION_END)
-      EventHandler.one(this._element, TRANSITION_END, () => {
-        this._element.classList.remove(CLASS_NAME_STATIC)
-        if (!isModalOverflowing) {
-          EventHandler.one(this._element, TRANSITION_END, () => {
-            this._element.style.overflowY = ''
-          })
-          emulateTransitionEnd(this._element, modalTransitionDuration)
-        }
-      })
-      emulateTransitionEnd(this._element, modalTransitionDuration)
-      this._element.focus()
-    } else {
-      this.hide()
-    }
+    })
+    emulateTransitionEnd(this._element, modalTransitionDuration)
+    this._element.focus()
   }
 
   // ----------------------------------------------------------------------
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index b9640097a9..2a73194177 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -595,12 +595,11 @@ describe('Modal', () => {
       modal.show()
     })
 
-    it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>'
+    it('should not close modal when escape key is pressed with keyboard = false', done => {
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
-        backdrop: 'static',
         keyboard: false
       })