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

Fix: Click on input outside of dropdown-menu prevents dropdown from closing (#33920)

Browse Source 
* test: add test if user clicks on input not contained within dropdown-menu

* fix: click on inputs that are not contained within dropdown-menu prevent dropdown from closing
This commit is contained in:
alpadev 2021-05-11 08:09:00 +02:00 committed by GitHub
parent 03842b5f25
commit 7647b8fe5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/src/dropdown.js
View File

@ -408,14 +408,8 @@ class Dropdown extends BaseComponent {
} }
static clearMenus(event) { static clearMenus(event) {
if (event) { if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) { return
return
}
if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
return
}
} }
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE) const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@ -445,8 +439,8 @@ class Dropdown extends BaseComponent {
continue continue
} }
// Tab navigation through the dropdown menu shouldn't close the menu // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) { if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
continue continue
} }

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

@ -1587,7 +1587,7 @@ describe('Dropdown', () => {
triggerDropdown.click() triggerDropdown.click()
}) })
it('should not close the dropdown if the user clicks on a text field', done => { it('should not close the dropdown if the user clicks on a text field within dropdown-menu', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="dropdown">', '<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1613,7 +1613,7 @@ describe('Dropdown', () => {
triggerDropdown.click() triggerDropdown.click()
}) })
it('should not close the dropdown if the user clicks on a textarea', done => { it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="dropdown">', '<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1639,6 +1639,32 @@ describe('Dropdown', () => {
triggerDropdown.click() triggerDropdown.click()
}) })
it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' </div>',
'</div>',
'<input type="text">'
]
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const input = fixtureEl.querySelector('input')
triggerDropdown.addEventListener('hidden.bs.dropdown', () => {
done()
})
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
input.dispatchEvent(createEvent('click', {
bubbles: true
}))
})
triggerDropdown.click()
})
it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => { it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="dropdown">', '<div class="dropdown">',