Merge 88a006a603 into 4c98145482

js/src/modal.js

@@ -141,13 +141,17 @@ class Modal extends BaseComponent {
   }
 
   dispose() {
-    EventHandler.off(window, EVENT_KEY)
+    EventHandler.on(this._element, EVENT_HIDDEN, () => {
-    EventHandler.off(this._dialog, EVENT_KEY)
+      EventHandler.off(window, EVENT_KEY)
+      EventHandler.off(this._dialog, EVENT_KEY)
 
-    this._backdrop.dispose()
+      this._backdrop?.dispose()
-    this._focustrap.deactivate()
+      this._focustrap.deactivate()
 
-    super.dispose()
+      super.dispose()
+    })
+
+    this._hideModal()
   }
 
   handleUpdate() {

js/tests/unit/modal.spec.js

@@ -1,3 +1,4 @@
+import BaseComponent from '../../src/base-component.js'
 import EventHandler from '../../src/dom/event-handler.js'
 import Modal from '../../src/modal.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
@@ -848,18 +849,48 @@ describe('Modal', () => {
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
-      const focustrap = modal._focustrap
+      const spyHideModal = spyOn(modal, '_hideModal').and.callThrough()
-      const spyDeactivate = spyOn(focustrap, 'deactivate').and.callThrough()
+      const spyDeactivate = spyOn(modal._focustrap, 'deactivate')
-
+      const spyBackdropDispose = spyOn(modal._backdrop, 'dispose')
-      expect(Modal.getInstance(modalEl)).toEqual(modal)
+      const spySuperDispose = spyOn(BaseComponent.prototype, 'dispose')
-
       const spyOff = spyOn(EventHandler, 'off')
 
       modal.dispose()
 
-      expect(Modal.getInstance(modalEl)).toBeNull()
+      expect(spyHideModal).toHaveBeenCalled()
-      expect(spyOff).toHaveBeenCalledTimes(3)
+      expect(spyOff).toHaveBeenCalledTimes(2)
       expect(spyDeactivate).toHaveBeenCalled()
+      expect(spyBackdropDispose).toHaveBeenCalled()
+      expect(spySuperDispose).toHaveBeenCalled()
+    })
+
+    it('should dispose a shown modal', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        const modal = new Modal(modalEl)
+
+        modal.show()
+
+        const spyHideModal = spyOn(modal, '_hideModal').and.callThrough()
+        const spyDeactivate = spyOn(modal._focustrap, 'deactivate')
+        const spyBackdropDispose = spyOn(modal._backdrop, 'dispose')
+        const spySuperDispose = spyOn(BaseComponent.prototype, 'dispose')
+        const spyOff = spyOn(EventHandler, 'off')
+
+        modal.dispose()
+
+        expect(spyHideModal).toHaveBeenCalled()
+
+        setTimeout(() => {
+          expect(spyOff).toHaveBeenCalledTimes(2)
+          expect(spyDeactivate).toHaveBeenCalled()
+          expect(spyBackdropDispose).toHaveBeenCalled()
+          expect(spySuperDispose).toHaveBeenCalled()
+          resolve()
+        }, 20)
+      })
     })
   })