fix(offcanas): activate focustrap when backdrop is enabled

twbs · Jul 11, 2022 · 9c966fd · 9c966fd
1 parent ac654a0
commit 9c966fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
@@ -114,7 +114,7 @@ class Offcanvas extends BaseComponent {
     this._element.classList.add(CLASS_NAME_SHOWING)
 
     const completeCallBack = () => {
-      if (!this._config.scroll) {
+      if (!this._config.scroll || this._config.backdrop) {
         this._focustrap.activate()
       }
 

diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
@@ -293,7 +293,8 @@ describe('Offcanvas', () => {
 
         const offCanvasEl = fixtureEl.querySelector('.offcanvas')
         const offCanvas = new Offcanvas(offCanvasEl, {
-          scroll: true
+          scroll: true,
+          backdrop: false
         })
 
         const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()
@@ -306,6 +307,27 @@ describe('Offcanvas', () => {
         offCanvas.show()
       })
     })
+
+    it('should trap focus if scroll is allowed & backdrop is enabled', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+        const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+        const offCanvas = new Offcanvas(offCanvasEl, {
+          scroll: true,
+          backdrop: true
+        })
+
+        const spy = spyOn(offCanvas._focustrap, 'activate').and.callThrough()
+
+        offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+          expect(spy).toHaveBeenCalled()
+          resolve()
+        })
+
+        offCanvas.show()
+      })
+    })
   })
 
   describe('toggle', () => {