Drop tabs auto-focus (#37146)

* fix: drop tabs auto-focus

diff --git a/js/src/tab.js b/js/src/tab.js
index 91187ae9f019c02642b788ec1e3e7b4df9be20ed..31dcec4a4b5c620dbd377d44fe75f8bf5b537fe2 100644 (file)
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -115,7 +115,6 @@ class Tab extends BaseComponent {
         return
       }
 
-      element.focus()
       element.removeAttribute('tabindex')
       element.setAttribute('aria-selected', true)
       this._toggleDropDown(element, true)

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index f1c1d695c31528d8f78319cb5a4f2132c5e5abc2..15d581173601ffe989a928df8f7a363d88994cce 100644 (file)
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -36,9 +36,7 @@ describe('Tab', () => {
       expect(tabBySelector._element).toEqual(tabEl)
       expect(tabByElement._element).toEqual(tabEl)
     })
-  })
 
-  describe('constructor', () => {
     it('Do not Throw exception if not parent', () => {
       fixtureEl.innerHTML = [
         fixtureEl.innerHTML = '<div class=""><div class="nav-link"></div></div>'
@@ -383,6 +381,35 @@ describe('Tab', () => {
         btnCloseEl.click()
       })
     })
+
+    it('should not focus on opened tab', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<ul class="nav" role="tablist">',
+          '  <li><button type="button" id="home" data-bs-target="#home" role="tab">Home</button></li>',
+          '  <li><button type="button" id="triggerProfile" data-bs-target="#profile" role="tab">Profile</button></li>',
+          '</ul>',
+          '<ul>',
+          '  <li id="home" role="tabpanel"></li>',
+          '  <li id="profile" role="tabpanel"></li>',
+          '</ul>'
+        ].join('')
+
+        const firstTab = fixtureEl.querySelector('#home')
+        firstTab.focus()
+
+        const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+        const tab = new Tab(profileTriggerEl)
+
+        profileTriggerEl.addEventListener('shown.bs.tab', () => {
+          expect(document.activeElement).toBe(firstTab)
+          expect(document.activeElement).not.toBe(profileTriggerEl)
+          resolve()
+        })
+
+        tab.show()
+      })
+    })
   })
 
   describe('dispose', () => {