Skip to content

Commit

Permalink
Merge branch 'main' into gs-regression-allow-offcanvas-to-not-enforce…
Browse files Browse the repository at this point in the history 
…-focus
  • Loading branch information
@XhmikosR
XhmikosR committed Apr 20, 2021
2 parents 7aa4a3c + 0bbe45c commit 17c6092
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 69 deletions.
20 changes: 13 additions & 7 deletions js/src/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,17 @@ const Default = {
boundary: 'clippingParents',
reference: 'toggle',
display: 'dynamic',
popperConfig: null
popperConfig: null,
autoClose: true
}

const DefaultType = {
offset: '(array|string|function)',
boundary: '(string|element)',
reference: '(string|element|object)',
display: 'string',
popperConfig: '(null|object|function)'
popperConfig: '(null|object|function)',
autoClose: '(boolean|string)'
}

/**
Expand Down Expand Up @@ -127,9 +129,8 @@ class Dropdown extends BaseComponent {

const isActive = this._element.classList.contains(CLASS_NAME_SHOW)

Dropdown.clearMenus()

if (isActive) {
this.hide()
return
}

Expand Down Expand Up @@ -424,7 +425,7 @@ class Dropdown extends BaseComponent {

for (let i = 0, len = toggles.length; i < len; i++) {
const context = Data.get(toggles[i], DATA_KEY)
if (!context) {
if (!context || context._config.autoClose === false) {
continue
}

Expand All @@ -437,8 +438,13 @@ class Dropdown extends BaseComponent {
}

if (event) {
// Don't close the menu if the clicked element or one of its parents is the dropdown button
if ([context._element].some(element => event.composedPath().includes(element))) {
const composedPath = event.composedPath()
const isMenuTarget = composedPath.includes(context._menu)
if (
composedPath.includes(context._element) ||
(context._config.autoClose === 'inside' && !isMenuTarget) ||
(context._config.autoClose === 'outside' && isMenuTarget)
) {
continue
}

Expand Down
11 changes: 8 additions & 3 deletions js/src/tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,7 @@ class Tab extends BaseComponent {
show() {
if ((this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
this._element.classList.contains(CLASS_NAME_ACTIVE)) ||
isDisabled(this._element)) {
this._element.classList.contains(CLASS_NAME_ACTIVE))) {
return
}

Expand Down Expand Up @@ -202,7 +201,13 @@ class Tab extends BaseComponent {
*/

EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
event.preventDefault()
if (['A', 'AREA'].includes(this.tagName)) {
event.preventDefault()
}

if (isDisabled(this)) {
return
}

const data = Data.get(this, DATA_KEY) || new Tab(this)
data.show()
Expand Down
1 change: 0 additions & 1 deletion js/src/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,6 @@ class Tooltip extends BaseComponent {
{
name: 'flip',
options: {
altBoundary: true,
fallbackPlacements: this.config.fallbackPlacements
}
},
Expand Down
101 changes: 97 additions & 4 deletions js/tests/unit/dropdown.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,18 +216,17 @@ describe('Dropdown', () => {
const firstDropdownEl = fixtureEl.querySelector('.first')
const secondDropdownEl = fixtureEl.querySelector('.second')
const dropdown1 = new Dropdown(btnDropdown1)
const dropdown2 = new Dropdown(btnDropdown2)

firstDropdownEl.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown1.classList.contains('show')).toEqual(true)
spyOn(dropdown1._popper, 'destroy')
dropdown2.toggle()
btnDropdown2.click()
})

secondDropdownEl.addEventListener('shown.bs.dropdown', () => {
secondDropdownEl.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
expect(dropdown1._popper.destroy).toHaveBeenCalled()
done()
})
}))

dropdown1.toggle()
})
Expand Down Expand Up @@ -1739,6 +1738,100 @@ describe('Dropdown', () => {
toggle.dispatchEvent(keydownEscape)
toggle.dispatchEvent(keyupEscape)
})

it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside">Dropdown toggle</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
'</div>'
]

const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')

const expectDropdownToBeOpened = () => setTimeout(() => {
expect(dropdownToggle.classList.contains('show')).toEqual(true)
dropdownMenu.click()
}, 150)

dropdownToggle.addEventListener('shown.bs.dropdown', () => {
document.documentElement.click()
expectDropdownToBeOpened()
})

dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
expect(dropdownToggle.classList.contains('show')).toEqual(false)
done()
}))

dropdownToggle.click()
})

it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown toggle</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
'</div>'
]

const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')

const expectDropdownToBeOpened = () => setTimeout(() => {
expect(dropdownToggle.classList.contains('show')).toEqual(true)
document.documentElement.click()
}, 150)

dropdownToggle.addEventListener('shown.bs.dropdown', () => {
dropdownMenu.click()
expectDropdownToBeOpened()
})

dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownToggle.classList.contains('show')).toEqual(false)
done()
})

dropdownToggle.click()
})

it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false">Dropdown toggle</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Dropdown item</a>',
' </div>',
'</div>'
]

const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')

const expectDropdownToBeOpened = (shouldTriggerClick = true) => setTimeout(() => {
expect(dropdownToggle.classList.contains('show')).toEqual(true)
if (shouldTriggerClick) {
document.documentElement.click()
} else {
done()
}

expectDropdownToBeOpened(false)
}, 150)

dropdownToggle.addEventListener('shown.bs.dropdown', () => {
dropdownMenu.click()
expectDropdownToBeOpened()
})

dropdownToggle.click()
})
})

describe('jQueryInterface', () => {
Expand Down
121 changes: 69 additions & 52 deletions js/tests/unit/tab.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,58 +198,6 @@ describe('Tab', () => {
}, 30)
})

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>',
'</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>',
' <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', () => {
throw new Error('should not trigger shown event')
})

tab.show()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})

it('show and shown events should reference correct relatedTarget', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
Expand Down Expand Up @@ -695,5 +643,74 @@ describe('Tab', () => {

secondNavEl.click()
})

it('should prevent default when the trigger is <a> or <area>', done => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><a type="button" href="#test" class="active" role="tab" data-bs-toggle="tab">Home</a></li>',
' <li><a type="button" href="#test2" role="tab" data-bs-toggle="tab">Home</a></li>',
'</ul>'
].join('')

const tabEl = fixtureEl.querySelector('[href="#test2"]')
spyOn(Event.prototype, 'preventDefault').and.callThrough()

tabEl.addEventListener('shown.bs.tab', () => {
expect(tabEl.classList.contains('active')).toEqual(true)
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
})

tabEl.click()
})

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>',
'</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]')
triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})

triggerDisabled.click()
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')

triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})

triggerDisabled.click()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})
})
})
Loading

0 comments on commit 17c6092

Please sign in to comment.