diff options
| -rw-r--r-- | js/src/tab.js | 7 | ||||
| -rw-r--r-- | js/tests/unit/tab.spec.js | 22 |
2 files changed, 28 insertions, 1 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index 4d823cc61..7301779d6 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -161,7 +161,12 @@ class Tab extends BaseComponent { element.classList.add(CLASS_NAME_SHOW) } - if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { + let parent = element.parentNode + if (parent && parent.nodeName === 'LI') { + parent = parent.parentNode + } + + if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { const dropdownElement = element.closest(SELECTOR_DROPDOWN) if (dropdownElement) { diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 4741b495d..c8e1475ad 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -515,6 +515,28 @@ describe('Tab', () => { expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false) }) + it('should support li > .dropdown-item', () => { + fixtureEl.innerHTML = [ + '<ul class="nav nav-tabs">', + ' <li class="nav-item"><a class="nav-link active" href="#home" data-bs-toggle="tab">Home</a></li>', + ' <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>', + ' <li class="nav-item dropdown">', + ' <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>', + ' <ul class="dropdown-menu">', + ' <li><a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a></li>', + ' <li><a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a></li>', + ' </ul>', + ' </li>', + '</ul>' + ].join('') + + const firstDropItem = fixtureEl.querySelector('.dropdown-item') + + firstDropItem.click() + expect(firstDropItem.classList.contains('active')).toEqual(true) + expect(fixtureEl.querySelector('.nav-link').classList.contains('active')).toEqual(false) + }) + it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '<nav class="nav nav-tabs" role="tablist">', |