rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-21 13:29:00 +01:00
Code Issues Actions 10 Packages Releases Activity

Fix dropdown escape propagation (#33479)

Browse Source
This commit is contained in:
alpadev 2021-04-01 20:44:04 +02:00 committed by GitHub
parent 6e7f1a9a34
commit f36f834453
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
js/src/dropdown.js
View File

@ -443,54 +443,7 @@ class Dropdown extends BaseComponent {
}
}
static getParentFromElement(element) {
return getElementFromSelector(element) || element.parentNode
}
static dataApiKeydownHandler(event) {
// If not input/textarea:
// - And not a key in REGEXP_KEYDOWN => not a dropdown command
// If input/textarea:
// - If space key => not a dropdown command
// - If key is other than escape
// - If key is not up or down => not a dropdown command
// - If trigger inside the menu => not a dropdown command
if (/input|textarea/i.test(event.target.tagName) ?
event.key === SPACE_KEY || (event.key !== ESCAPE_KEY &&
((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||
event.target.closest(SELECTOR_MENU))) :
!REGEXP_KEYDOWN.test(event.key)) {
return
}
event.preventDefault()
event.stopPropagation()
if (isDisabled(this)) {
return
}
const parent = Dropdown.getParentFromElement(this)
const isActive = this.classList.contains(CLASS_NAME_SHOW)
if (event.key === ESCAPE_KEY) {
const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
button.focus()
Dropdown.clearMenus()
return
}
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
button.click()
return
}
if (!isActive || event.key === SPACE_KEY) {
Dropdown.clearMenus()
return
}
static selectMenuItem(parent, event) {
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent).filter(isVisible)
if (!items.length) {
@ -514,6 +467,60 @@ class Dropdown extends BaseComponent {
items[index].focus()
}
static getParentFromElement(element) {
return getElementFromSelector(element) || element.parentNode
}
static dataApiKeydownHandler(event) {
// If not input/textarea:
// - And not a key in REGEXP_KEYDOWN => not a dropdown command
// If input/textarea:
// - If space key => not a dropdown command
// - If key is other than escape
// - If key is not up or down => not a dropdown command
// - If trigger inside the menu => not a dropdown command
if (/input|textarea/i.test(event.target.tagName) ?
event.key === SPACE_KEY || (event.key !== ESCAPE_KEY &&
((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||
event.target.closest(SELECTOR_MENU))) :
!REGEXP_KEYDOWN.test(event.key)) {
return
}
const isActive = this.classList.contains(CLASS_NAME_SHOW)
if (!isActive && event.key === ESCAPE_KEY) {
return
}
event.preventDefault()
event.stopPropagation()
if (isDisabled(this)) {
return
}
const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
if (event.key === ESCAPE_KEY) {
getToggleButton().focus()
Dropdown.clearMenus()
return
}
if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
getToggleButton().click()
return
}
if (!isActive || event.key === SPACE_KEY) {
Dropdown.clearMenus()
return
}
Dropdown.selectMenuItem(Dropdown.getParentFromElement(this), event)
}
}
/**

33
js/tests/unit/dropdown.spec.js
View File

@ -1671,6 +1671,39 @@ describe('Dropdown', () => {
done()
}, 20)
})
it('should propagate escape key events if dropdown is closed', done => {
fixtureEl.innerHTML = [
'<div class="parent">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Some Item</a>',
' </div>',
' </div>',
'</div>'
]
const parent = fixtureEl.querySelector('.parent')
const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const parentKeyHandler = jasmine.createSpy('parentKeyHandler')
parent.addEventListener('keydown', parentKeyHandler)
parent.addEventListener('keyup', () => {
expect(parentKeyHandler).toHaveBeenCalled()
done()
})
const keydownEscape = createEvent('keydown', { bubbles: true })
keydownEscape.key = 'Escape'
const keyupEscape = createEvent('keyup', { bubbles: true })
keyupEscape.key = 'Escape'
toggle.focus()
toggle.dispatchEvent(keydownEscape)
toggle.dispatchEvent(keyupEscape)
})
})
describe('jQueryInterface', () => {