mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

Fix dropdowns

Browse Source
This commit is contained in:
louismaxime.piton 2022-03-08 12:34:21 +01:00 committed by Mark Otto
parent 2d11c1c28a
commit 6c40476af9
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/src/dropdown.js
View File

@ -48,6 +48,8 @@ const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart' const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}` const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
@ -62,6 +64,8 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end' const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start' const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start' const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
const PLACEMENT_TOPCENTER = 'top'
const PLACEMENT_BOTTOMCENTER = 'bottom'
const Default = { const Default = {
offset: [0, 2], offset: [0, 2],
@ -248,6 +252,14 @@ class Dropdown extends BaseComponent {
return PLACEMENT_LEFT return PLACEMENT_LEFT
} }
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
return PLACEMENT_TOPCENTER
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
return PLACEMENT_BOTTOMCENTER
}
// We need to trim the value because custom properties can also include spaces // We need to trim the value because custom properties can also include spaces
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end' const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
@ -400,8 +412,12 @@ class Dropdown extends BaseComponent {
const instance = Dropdown.getOrCreateInstance(getToggleButton) const instance = Dropdown.getOrCreateInstance(getToggleButton)
if (isEscapeEvent) { if (isEscapeEvent) {
instance.hide() if (getToggleButton.classList.contains(CLASS_NAME_SHOW)) {
getToggleButton.focus() instance.hide()
getToggleButton.focus()
event.stopPropagation()
}
return return
} }

2
scss/_dropdown.scss
View File

@ -51,7 +51,7 @@
min-width: var(--#{$variable-prefix}dropdown-min-width); min-width: var(--#{$variable-prefix}dropdown-min-width);
padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x); padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
margin: 0; // Override default margin of ul margin: 0; // Override default margin of ul
@include font-size(var(#{$variable-prefix}dropdown-font-size)); @include font-size(var(--#{$variable-prefix}dropdown-font-size));
color: var(--#{$variable-prefix}dropdown-color); color: var(--#{$variable-prefix}dropdown-color);
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none; list-style: none;