-
-
Notifications
You must be signed in to change notification settings - Fork 79.2k
Open
Labels
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
In bootstrap 4, the dropdown js was ignoring clicks on child elements of any form within the dropdown.
.on(EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => {
e.stopPropagation()
})
https://stackblitz.com/edit/ei1szkk7-n9jbbfnv?file=index.html
In current bootstrap, this is no longer this case. Only events from "input"s directly are ignored. This breaks functionality such as clicking on a form input element's label to focus the input.
// 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
}
https://stackblitz.com/edit/ei1szkk7?file=index.html
I think it would also be helpful if the dropdown documentation page had an example with a form within an actual dropdown (with toggle) rather than just within a "dropdown-menu" element.
Reduced test cases
https://stackblitz.com/edit/ei1szkk7?file=index.html
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3