mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 22:26:57 +02:00
Code Issues Releases Wiki Activity

Allow data-toggle="dropdown" and form click events to bubble

Browse Source 
* remove stopPropagation from button click event

* test for delegated click events

* ensure button children can open menu

* test to ensure clicking button opens the menu

* check current element and parents

* allow dropdown form click events to bubble
This commit is contained in:
Casey Holzer
2021-01-06 03:07:43 +02:00
committed by XhmikosR
parent 9667438c1e
commit 16bc47da3c
2 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
js/src/dropdown.js
View File

@@ -59,7 +59,6 @@ const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_NAVBAR = 'navbar'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
const SELECTOR_FORM_CHILD = '.dropdown form'
const SELECTOR_MENU = '.dropdown-menu'
const SELECTOR_NAVBAR_NAV = '.navbar-nav'
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
@@ -253,7 +252,6 @@ class Dropdown extends BaseComponent {
_addEventListeners() {
EventHandler.on(this._element, EVENT_CLICK, event => {
event.preventDefault()
event.stopPropagation()
this.toggle()
})
}
@@ -377,8 +375,14 @@ class Dropdown extends BaseComponent {
}
static clearMenus(event) {
if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) {
return
if (event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
}
if (/input|select|textarea|form/i.test(event.target.tagName)) {
return
}
}
const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -402,11 +406,16 @@ class Dropdown extends BaseComponent {
continue
}
if (event && ((event.type === 'click' &&
/input|textarea/i.test(event.target.tagName)) ||
(event.type === 'keyup' && event.key === TAB_KEY)) &&
dropdownMenu.contains(event.target)) {
continue
if (event) {
// Don't close the menu if the clicked element or one of its parents is the dropdown button
if ([context._element].some(element => event.composedPath().includes(element))) {
continue
}
// Tab navigation through the dropdown menu shouldn't close the menu
if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
continue
}
}
const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE, relatedTarget)
@@ -519,10 +528,8 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
event.preventDefault()
event.stopPropagation()
Dropdown.dropdownInterface(this, 'toggle')
Dropdown.dropdownInterface(this)
})
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())
/**
* ------------------------------------------------------------------------