1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00

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

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', () => {