Offcanvas optional window resizing

Fixes twbs#38080
Rezyan · Apr 12, 2023 · 1e138b8 · 1e138b8
1 parent b4befee
commit 1e138b8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
@@ -49,13 +49,15 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
 const Default = {
   backdrop: true,
   keyboard: true,
-  scroll: false
+  scroll: false,
+  hideNotFixedOnWindowResizing: true
 }
 
 const DefaultType = {
   backdrop: '(boolean|string)',
   keyboard: 'boolean',
-  scroll: 'boolean'
+  scroll: 'boolean',
+  hideNotFixedOnWindowResizing: 'boolean'
 }
 
 /**
@@ -266,7 +268,10 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
 EventHandler.on(window, EVENT_RESIZE, () => {
   for (const element of SelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')) {
     if (getComputedStyle(element).position !== 'fixed') {
-      Offcanvas.getOrCreateInstance(element).hide()
+      const data = Offcanvas.getOrCreateInstance(element)
+      if (data._config.hideNotFixedOnWindowResizing) {
+        data.hide()
+      }
     }
   }
 })

diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
@@ -177,6 +177,30 @@ describe('Offcanvas', () => {
         offCanvas.show()
       })
     })
+
+    it('should not call `hide` on resize, if `hideNotFixedOnWindowResizing` is false', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div class="offcanvas-lg"></div>'
+
+        const offCanvasEl = fixtureEl.querySelector('div')
+        const offCanvas = new Offcanvas(offCanvasEl, {
+          hideNotFixedOnWindowResizing: false
+        })
+
+        const spy = spyOn(offCanvas, 'hide').and.callThrough()
+
+        offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+          const resizeEvent = createEvent('resize')
+          offCanvasEl.style.removeProperty('position')
+
+          window.dispatchEvent(resizeEvent)
+          expect(spy).not.toHaveBeenCalled()
+          resolve()
+        })
+
+        offCanvas.show()
+      })
+    })
   })
 
   describe('config', () => {
@@ -190,10 +214,11 @@ describe('Offcanvas', () => {
       expect(offCanvas._backdrop._config.isVisible).toBeTrue()
       expect(offCanvas._config.keyboard).toBeTrue()
       expect(offCanvas._config.scroll).toBeFalse()
+      expect(offCanvas._config.hideNotFixedOnWindowResizing).toBeTrue()
     })
 
     it('should read data attributes and override default config', () => {
-      fixtureEl.innerHTML = '<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false"></div>'
+      fixtureEl.innerHTML = '<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false" data-bs-hide-not-fixed-on-window-resizing="false"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
       const offCanvas = new Offcanvas(offCanvasEl)
@@ -202,6 +227,7 @@ describe('Offcanvas', () => {
       expect(offCanvas._backdrop._config.isVisible).toBeFalse()
       expect(offCanvas._config.keyboard).toBeFalse()
       expect(offCanvas._config.scroll).toBeTrue()
+      expect(offCanvas._config.hideNotFixedOnWindowResizing).toBeFalse()
     })
 
     it('given a config object must override data attributes', () => {
@@ -211,11 +237,13 @@ describe('Offcanvas', () => {
       const offCanvas = new Offcanvas(offCanvasEl, {
         backdrop: true,
         keyboard: true,
-        scroll: false
+        scroll: false,
+        hideNotFixedOnWindowResizing: false
       })
       expect(offCanvas._config.backdrop).toBeTrue()
       expect(offCanvas._config.keyboard).toBeTrue()
       expect(offCanvas._config.scroll).toBeFalse()
+      expect(offCanvas._config.hideNotFixedOnWindowResizing).toBeFalse()
     })
   })
 

diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
@@ -309,6 +309,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap
 | `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. |
 | `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. |
 | `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. |
+| `hideNotFixedOnWindowResizing` | boolean | `true` | Hide the offcanvas when resizing the window and when its position is not `fixed` (e.g. when `absolute`). |
 {{< /bs-table >}}
 
 ### Methods