mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki 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
2 changed files with 32 additions and 6 deletions
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, emulateTransitionEnd,
getElementFromSelector, getElementFromSelector,
getTransitionDurationFromElement, getTransitionDurationFromElement,
isDisabled,
reflow reflow
} from './util/index' } from './util/index'
import Data from './dom/data' 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_DROPDOWN_MENU = 'dropdown-menu'
const CLASS_NAME_ACTIVE = 'active' const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_FADE = 'fade' const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show' const CLASS_NAME_SHOW = 'show'
@@ -67,7 +67,7 @@ class Tab extends BaseComponent {
if ((this._element.parentNode && if ((this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
this._element.classList.contains(CLASS_NAME_ACTIVE)) || this._element.classList.contains(CLASS_NAME_ACTIVE)) ||
this._element.classList.contains(CLASS_NAME_DISABLED)) { isDisabled(this._element)) {
return return
} }

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

@@ -198,11 +198,11 @@ describe('Tab', () => {
}, 30) }, 30)
}) })
it('should not fire shown when tab is disabled', done => { it('should not fire shown when tab has disabled attribute', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">', '<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="#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="#profile" class="nav-link" disabled role="tab">Profile</button></li>',
'</ul>', '</ul>',
'<div class="tab-content">', '<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>', ' <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -210,7 +210,33 @@ describe('Tab', () => {
'</div>' '</div>'
].join('') ].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) const tab = new Tab(triggerDisabled)
triggerDisabled.addEventListener('shown.bs.tab', () => { triggerDisabled.addEventListener('shown.bs.tab', () => {