diff options
| author | Carson Sievert <cpsievert1@gmail.com> | 2021-04-21 08:30:19 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-21 08:30:19 +0300 |
| commit | 2cbb0a941c0a33fc11518061cfd6fad5c0d1c3c0 (patch) | |
| tree | 1205f51d9342bc0679725469d0e6191d23cc2dd7 | |
| parent | 2e7141f0499eee5e4500b5c4b77984fa6972d895 (diff) | |
Dropdown: support `.dropdown-item` wrapped in `<li>` tags (#33634)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
| -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 4d823cc61c..7301779d65 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 4741b495de..c8e1475adb 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">', |