Offcanvas.js: If scroll is allowed, should allow focus on other elements (#33677)

diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 2b6335b39181c25cfed24bd4e2414d6644565a77..7fcdfb48a8b6c7fe0fed630fd95fc17164db105c 100644 (file)
--- 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
index 67831ad24967d4e90a53d9a30ea0f17627df8f44..2419e5723cc8ea7a9792c04e558f0f81607c824f 100644 (file)
--- 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', () => {