Dialog/Drawer: fix focus-restore scroll and dispose-while-open cleanup

.bundlewatch.config.json

@@ -34,15 +34,15 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "82.5 kB"
+      "maxSize": "82.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
       "maxSize": "53.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "53.75 kB"
+      "maxSize": "54.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",

js/src/dialog-base.js

@@ -117,6 +117,17 @@ class DialogBase extends BaseComponent {
     }, this._element, this._isAnimated())
   }
 
+  dispose() {
+    // If disposed while still open, close the native <dialog> and restore body
+    // scroll. Otherwise `dialog-open` (overflow: hidden) would stay stuck on the
+    // body — e.g. when an SPA tears the component down mid-navigation.
+    if (this._element.open) {
+      this._closeAndCleanup()
+    }
+
+    super.dispose()
+  }
+
   // Protected — hooks for subclasses to override
 
   _getShowOptions() {

js/src/dialog.js

@@ -119,7 +119,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
     EventHandler.one(target, EVENT_HIDDEN, () => {
       if (isVisible(this)) {
-        this.focus()
+        this.focus({ preventScroll: true })
       }
     })
   })

js/src/drawer.js

@@ -149,7 +149,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
   EventHandler.one(target, EVENT_HIDDEN, () => {
     if (isVisible(this)) {
-      this.focus()
+      this.focus({ preventScroll: true })
     }
   })
 

js/tests/unit/dialog.spec.js

@@ -713,6 +713,28 @@ describe('Dialog', () => {
       expect(Dialog.getInstance(dialogEl)).toBeNull()
       expect(spyOff).toHaveBeenCalled()
     })
+
+    it('should close the dialog and restore body scroll when disposed while open', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<dialog class="dialog" id="exampleDialog"></dialog>'
+
+        const dialogEl = fixtureEl.querySelector('.dialog')
+        const dialog = new Dialog(dialogEl)
+
+        dialogEl.addEventListener('shown.bs.dialog', () => {
+          expect(dialogEl.open).toBeTrue()
+          expect(document.body.classList.contains('dialog-open')).toBeTrue()
+
+          dialog.dispose()
+
+          expect(dialogEl.open).toBeFalse()
+          expect(document.body.classList.contains('dialog-open')).toBeFalse()
+          resolve()
+        })
+
+        dialog.show()
+      })
+    })
   })
 
   describe('data-api', () => {
@@ -803,7 +825,7 @@ describe('Dialog', () => {
 
         const hideListener = () => {
           setTimeout(() => {
-            expect(spy).toHaveBeenCalled()
+            expect(spy).toHaveBeenCalledWith({ preventScroll: true })
             resolve()
           }, 20)
         }

js/tests/unit/drawer.spec.js

@@ -570,6 +570,28 @@ describe('Drawer', () => {
       expect(Drawer.getInstance(drawerEl)).toBeNull()
       expect(spyOff).toHaveBeenCalled()
     })
+
+    it('should close the drawer and restore body scroll when disposed while open', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<dialog class="drawer"></dialog>'
+
+        const drawerEl = fixtureEl.querySelector('dialog')
+        const drawer = new Drawer(drawerEl)
+
+        drawerEl.addEventListener('shown.bs.drawer', () => {
+          expect(drawerEl.open).toBeTrue()
+          expect(document.body.classList.contains('dialog-open')).toBeTrue()
+
+          drawer.dispose()
+
+          expect(drawerEl.open).toBeFalse()
+          expect(document.body.classList.contains('dialog-open')).toBeFalse()
+          resolve()
+        })
+
+        drawer.show()
+      })
+    })
   })
 
   describe('data-api', () => {
@@ -649,7 +671,7 @@ describe('Drawer', () => {
         })
         drawerEl.addEventListener('hidden.bs.drawer', () => {
           setTimeout(() => {
-            expect(spy).toHaveBeenCalled()
+            expect(spy).toHaveBeenCalledWith({ preventScroll: true })
             resolve()
           }, 5)
         })