Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 11, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d6d0d6
test: add test if user clicks on input not contained within dropdown-…
alpadev May 10, 2021
55ff527
fix: click on inputs that are not contained within dropdown-menu prev…
alpadev May 10, 2021
41661ea
Merge branch 'main' into fix-input-prevents-dropdown-closing
rohit2sharma95 May 11, 2021
6718c3d
Merge branch 'main' into fix-input-prevents-dropdown-closing
XhmikosR May 11, 2021
7b35dd7
Merge branch 'main' into fix-input-prevents-dropdown-closing
XhmikosR May 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions js/src/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,14 +408,8 @@ class Dropdown extends BaseComponent {
}

static clearMenus(event) {
if (event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
}

if (/input|select|option|textarea|form/i.test(event.target.tagName)) {
return
}
if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) {
return
}

const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
Expand Down Expand Up @@ -445,8 +439,8 @@ class Dropdown extends BaseComponent {
continue
}

// Tab navigation through the dropdown menu shouldn't close the menu
if (event.type === 'keyup' && event.key === TAB_KEY && context._menu.contains(event.target)) {
// Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
continue
}

Expand Down
30 changes: 28 additions & 2 deletions js/tests/unit/dropdown.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
Expand All @@ -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>',
Expand All @@ -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">',
Expand Down