diff options
| -rw-r--r-- | js/src/dropdown.js | 20 | ||||
| -rw-r--r-- | scss/_dropdown.scss | 2 |
2 files changed, 19 insertions, 3 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index c93739b523..65b3aa372a 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -48,6 +48,8 @@ const CLASS_NAME_SHOW = 'show' const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPEND = 'dropend' 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_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_RIGHT = isRTL() ? 'left-start' : 'right-start' const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start' +const PLACEMENT_TOPCENTER = 'top' +const PLACEMENT_BOTTOMCENTER = 'bottom' const Default = { offset: [0, 2], @@ -248,6 +252,14 @@ class Dropdown extends BaseComponent { 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 const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end' @@ -400,8 +412,12 @@ class Dropdown extends BaseComponent { const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isEscapeEvent) { - instance.hide() - getToggleButton.focus() + if (getToggleButton.classList.contains(CLASS_NAME_SHOW)) { + instance.hide() + getToggleButton.focus() + event.stopPropagation() + } + return } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 6f8acc1aa4..e04f91cb0f 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -51,7 +51,7 @@ min-width: var(--#{$variable-prefix}dropdown-min-width); padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x); 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); text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; |