diff options
| author | Carson Sievert <cpsievert1@gmail.com> | 2021-04-15 13:53:55 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-15 13:53:55 +0300 |
| commit | 69f5c0130b4f13e0dc22d86bf1bbe1b362891cd7 (patch) | |
| tree | 381d12df8abf2db63202a1ea2f7dd46b1090ebb7 /js | |
| parent | f61a0218b36d915db80dc23635a9078e98e2e3e0 (diff) | |
Fix v5 regressions in tab dropdown functionality (#33626)
Scope selector to `dropdownElement` when adding active classes
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/tab.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/tab.spec.js | 35 |
2 files changed, 36 insertions, 1 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index 3c5ced502b..ffca5f299e 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -166,7 +166,7 @@ class Tab extends BaseComponent { const dropdownElement = element.closest(SELECTOR_DROPDOWN) if (dropdownElement) { - SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE) + SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement) .forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE)) } diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 231cf894c0..5b98bad9d5 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -532,6 +532,41 @@ describe('Tab', () => { expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false) }) + it('selecting a dropdown tab does not activate another', () => { + const nav1 = [ + '<ul class="nav nav-tabs" id="nav1">', + ' <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>', + ' <li class="nav-item dropdown">', + ' <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>', + ' </div>', + ' </li>', + '</ul>' + ].join('') + const nav2 = [ + '<ul class="nav nav-tabs" id="nav2">', + ' <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>', + ' <li class="nav-item dropdown">', + ' <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>', + ' </div>', + ' </li>', + '</ul>' + ].join('') + + fixtureEl.innerHTML = nav1 + nav2 + + const firstDropItem = fixtureEl.querySelector('#nav1 .dropdown-item') + + firstDropItem.click() + expect(firstDropItem.classList.contains('active')).toEqual(true) + expect(fixtureEl.querySelector('#nav1 .dropdown-toggle').classList.contains('active')).toEqual(true) + expect(fixtureEl.querySelector('#nav2 .dropdown-toggle').classList.contains('active')).toEqual(false) + expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false) + }) + it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '<nav class="nav nav-tabs" role="tablist">', |