Merge 0546612a5f into 4c98145482

js/src/modal.js

@@ -112,9 +112,6 @@ class Modal extends BaseComponent {
     this._isTransitioning = true
 
     this._scrollBar.hide()
-
-    document.body.classList.add(CLASS_NAME_OPEN)
-
     this._adjustDialog()
 
     this._backdrop.show(() => this._showElement(relatedTarget))
@@ -190,6 +187,8 @@ class Modal extends BaseComponent {
     this._element.classList.add(CLASS_NAME_SHOW)
 
     const transitionComplete = () => {
+      document.body.classList.add(CLASS_NAME_OPEN)
+
       if (this._config.focus) {
         this._focustrap.activate()
       }
@@ -249,8 +248,9 @@ class Modal extends BaseComponent {
     this._element.removeAttribute('role')
     this._isTransitioning = false
 
+    document.body.classList.remove(CLASS_NAME_OPEN)
+
     this._backdrop.hide(() => {
-      document.body.classList.remove(CLASS_NAME_OPEN)
       this._resetAdjustments()
       this._scrollBar.reset()
       EventHandler.trigger(this._element, EVENT_HIDDEN)

js/tests/unit/modal.spec.js

@@ -100,6 +100,7 @@ describe('Modal', () => {
           expect(modalEl.getAttribute('aria-hidden')).toBeNull()
           expect(modalEl.style.display).toEqual('block')
           expect(document.querySelector('.modal-backdrop')).not.toBeNull()
+          expect(document.body).toHaveClasss('modal-open')
           resolve()
         })
 
@@ -702,6 +703,7 @@ describe('Modal', () => {
           expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
           expect(modalEl.style.display).toEqual('none')
           expect(backdropSpy).toHaveBeenCalled()
+          expect(document.body).not.toHaveClass('modal-open')
           resolve()
         })
 
@@ -1326,4 +1328,36 @@ describe('Modal', () => {
       expect(modal2._config.backdrop).toBeTrue()
     })
   })
+  
+  describe('toggle between modals', () => {
+    it('should toggle modal-open class on body', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<button data-bs-toggle="modal" data-bs-target="#exampleModalToggle2"></button>',
+          '<div id="exampleModalToggle" class="modal fade"><div class="modal-dialog"></div></div>',
+          '<div id="exampleModalToggle2" class="modal"><div class="modal-dialog"></div></div>'
+        ].join('')
+
+        const trigger = fixtureEl.querySelector('button')
+        const modalEl1 = document.querySelector('#exampleModalToggle')
+        const modalEl2 = document.querySelector('#exampleModalToggle2')
+        const modal1 = new Modal(modalEl1)
+
+        modalEl1.addEventListener('shown.bs.modal', () => {
+          expect(document.body).toHaveClass('modal-open')
+          setTimeout(() => trigger.click(), 10)
+        })
+        modalEl1.addEventListener('hidden.bs.modal', () => {
+          expect(document.body).not.toHaveClass('modal-open')
+        })
+
+        modalEl2.addEventListener('shown.bs.modal', () => {
+          expect(document.body).toHaveClass('modal-open')
+          resolve()
+        })
+
+        modal1.show()
+      })
+    })
+  })
 })