rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Dynamic tab should not show when triggered on disabled element (#33257)

Browse Source 
* 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>
This commit is contained in:
Patrick H. Lauke 2021-03-17 08:52:40 +00:00 committed by GitHub
parent b9f30903a5
commit 3ce0a8d3ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/tab.js
View File

@ -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
}

34
js/tests/unit/tab.spec.js
View File

@ -198,11 +198,11 @@ 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>',
@ -210,7 +210,33 @@ describe('Tab', () => {
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('button.disabled')
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>',
' <div class="tab-pane" id="profile" role="tabpanel"></div>',
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('a.disabled')
const tab = new Tab(triggerDisabled)
triggerDisabled.addEventListener('shown.bs.tab', () => {