Offcanvas.js: If scroll is allowed, must not enforce focus on element

twbs · Apr 19, 2021 · 7aa4a3c · 7aa4a3c
1 parent d67121d
commit 7aa4a3c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
@@ -112,6 +112,7 @@ class Offcanvas extends BaseComponent {
 
     if (!this._config.scroll) {
       scrollBarHide()
+      this._enforceFocusOnElement(this._element)
     }
 
     this._element.removeAttribute('aria-hidden')
@@ -121,7 +122,6 @@ class Offcanvas extends BaseComponent {
 
     const completeCallBack = () => {
       EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
-      this._enforceFocusOnElement(this._element)
     }
 
     const transitionDuration = getTransitionDurationFromElement(this._element)

diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
@@ -220,6 +220,24 @@ describe('Offcanvas', () => {
 
       offCanvas.show()
     })
+
+    it('should not enforce focus if focus scroll is allowed', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl, {
+        scroll: true
+      })
+
+      spyOn(offCanvas, '_enforceFocusOnElement')
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvas._enforceFocusOnElement).not.toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
   })
 
   describe('toggle', () => {
@@ -328,6 +346,22 @@ describe('Offcanvas', () => {
       expect(instance).not.toBeNull()
       expect(Offcanvas.prototype.show).toHaveBeenCalled()
     })
+
+    it('should enforce focus', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+
+      spyOn(offCanvas, '_enforceFocusOnElement')
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvas._enforceFocusOnElement).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
+    })
   })
 
   describe('hide', () => {