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

Skip hidden dropdowns while focusing (#29523)

Browse source
This commit is contained in:
Jeremy Jackson 2019-10-17 15:01:44 +00:00 committed by XhmikosR
parent 104385c508
commit c1ee395f80
3 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/dropdown.js
View file

@ -9,6 +9,7 @@ import {
getjQuery,
getElementFromSelector,
isElement,
isVisible,
makeArray,
noop,
typeCheckConfig
@ -478,6 +479,7 @@ class Dropdown {
}
const items = makeArray(SelectorEngine.find(Selector.VISIBLE_ITEMS, parent))
.filter(isVisible)
if (!items.length) {
return

9
js/src/util/index.js
View file

@ -138,9 +138,12 @@ const isVisible = element => {
}
if (element.style && element.parentNode && element.parentNode.style) {
return element.style.display !== 'none' &&
element.parentNode.style.display !== 'none' &&
element.style.visibility !== 'hidden'
const elementStyle = getComputedStyle(element)
const parentNodeStyle = getComputedStyle(element.parentNode)
return elementStyle.display !== 'none' &&
parentNodeStyle.display !== 'none' &&
elementStyle.visibility !== 'hidden'
}
return false

37
js/tests/unit/dropdown.spec.js
View file

@ -1292,6 +1292,43 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
it('should skip hidden element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<style>',
' .d-none {',
' display: none;',
' }',
'</style>',
'<div class="dropdown">',
' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
' <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
' <a class="dropdown-item" href="#sub1" style="visibility: hidden">Hidden link</a>',
' <a id="item1" class="dropdown-item" href="#">Another link</a>',
' </div>',
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('shown.bs.dropdown', () => {
const keyDown = createEvent('keydown')
keyDown.which = 40
triggerDropdown.dispatchEvent(keyDown)
expect(document.activeElement.classList.contains('d-none')).toEqual(false, '.d-none not focused')
expect(document.activeElement.style.display === 'none').toEqual(false, '"display: none" not focused')
expect(document.activeElement.style.visibility === 'hidden').toEqual(false, '"visibility: hidden" not focused')
done()
})
triggerDropdown.click()
})
it('should focus next/previous element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',