diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2021-03-17 11:52:40 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-17 11:52:40 +0300 |
commit | 3ce0a8d3ecc05ac43fa5f5da0c5fc1aaea7742d5 (patch) | |
tree | 401b22206ceef2f6701dc336edae13dd71726d82 /js | |
parent | b9f30903a5a916904c873bd078240b3df743e093 (diff) |
Dynamic tab should not show when triggered on `disabled` element (#33257)
* show() should bail if the trigger has `disabled` attribute
* use 'isDisabled' helper
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'js')
-rw-r--r-- | js/src/tab.js | 4 | ||||
-rw-r--r-- | js/tests/unit/tab.spec.js | 34 |
2 files changed, 32 insertions, 6 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index 95968f4f8b..ec3d790b09 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -10,6 +10,7 @@ import { emulateTransitionEnd, getElementFromSelector, getTransitionDurationFromElement, + isDisabled, reflow } from './util/index' import Data from './dom/data' @@ -36,7 +37,6 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu' const CLASS_NAME_ACTIVE = 'active' -const CLASS_NAME_DISABLED = 'disabled' const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' @@ -67,7 +67,7 @@ class Tab extends BaseComponent { if ((this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) || - this._element.classList.contains(CLASS_NAME_DISABLED)) { + isDisabled(this._element)) { return } diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 35d17e16b9..231cf894c0 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -198,11 +198,37 @@ describe('Tab', () => { }, 30) }) - it('should not fire shown when tab is disabled', done => { + it('should not fire shown when tab has disabled attribute', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>', - ' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link disabled" role="tab">Profile</button></li>', + ' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>', + ' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>', + '</ul>', + '<div class="tab-content">', + ' <div class="tab-pane active" id="home" role="tabpanel"></div>', + ' <div class="tab-pane" id="profile" role="tabpanel"></div>', + '</div>' + ].join('') + + const triggerDisabled = fixtureEl.querySelector('button[disabled]') + const tab = new Tab(triggerDisabled) + + triggerDisabled.addEventListener('shown.bs.tab', () => { + throw new Error('should not trigger shown event') + }) + + tab.show() + setTimeout(() => { + expect().nothing() + done() + }, 30) + }) + + it('should not fire shown when tab has disabled class', done => { + fixtureEl.innerHTML = [ + '<ul class="nav nav-tabs" role="tablist">', + ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab" aria-selected="true">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -210,7 +236,7 @@ describe('Tab', () => { '</div>' ].join('') - const triggerDisabled = fixtureEl.querySelector('button.disabled') + const triggerDisabled = fixtureEl.querySelector('a.disabled') const tab = new Tab(triggerDisabled) triggerDisabled.addEventListener('shown.bs.tab', () => { |