kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

collapse: prevent url change if A nested tag is clicked (#32438)

Browse source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Daniele Faraglia 2020-12-21 12:37:35 +00:00 • committed by GitHub
parent 2d46e47464
commit 59cd71631e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/collapse.js
View file

@ -371,7 +371,7 @@ class Collapse extends BaseComponent {
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
if (event.target.tagName === 'A') {
if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
event.preventDefault()
}

23
js/tests/unit/collapse.spec.js
View file

@ -374,6 +374,29 @@ describe('Collapse', () => {
})
describe('data-api', () => {
it('should prevent url change if click on nested elements', done => {
fixtureEl.innerHTML = [
'<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">',
' <span id="nested"></span>',
'</a>',
'<div id="collapse" class="collapse"></div>'
].join('')
const triggerEl = fixtureEl.querySelector('a')
const nestedTriggerEl = fixtureEl.querySelector('#nested')
spyOn(Event.prototype, 'preventDefault').and.callThrough()
triggerEl.addEventListener('click', event => {
expect(event.target.isEqualNode(nestedTriggerEl)).toEqual(true)
expect(event.delegateTarget.isEqualNode(triggerEl)).toEqual(true)
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
})
nestedTriggerEl.click()
})
it('should show multiple collapsed elements', done => {
fixtureEl.innerHTML = [
'<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',