mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-10 23:54:08 +02:00
Code Issues Releases Wiki 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
2 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1587,7 +1587,7 @@ describe('Dropdown', () => {
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 = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -1613,7 +1613,7 @@ describe('Dropdown', () => {
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 = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -1639,6 +1639,32 @@ describe('Dropdown', () => {
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 => {
fixtureEl.innerHTML = [
'<div class="dropdown">',