1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 05:33:02 +02:00

Dropdown: support dynamic popper on navbar

This commit is contained in:
GeoSot
2022-02-24 21:56:15 +02:00
parent bc1b5b25ed
commit 9f80df5727

View File

@@ -55,7 +55,6 @@ 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}`
const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_MENU = '.dropdown-menu'
const SELECTOR_NAVBAR = '.navbar'
const SELECTOR_NAVBAR_NAV = '.navbar-nav' const SELECTOR_NAVBAR_NAV = '.navbar-nav'
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
@@ -136,7 +135,7 @@ class Dropdown extends BaseComponent {
return return
} }
this._createPopper() this._popper = this._createPopper()
// If this is a touch-enabled device we add extra // If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children; // empty mouseover listeners to the body's immediate children;
@@ -177,7 +176,6 @@ class Dropdown extends BaseComponent {
} }
update() { update() {
this._inNavbar = this._detectNavbar()
if (this._popper) { if (this._popper) {
this._popper.update() this._popper.update()
} }
@@ -238,7 +236,7 @@ class Dropdown extends BaseComponent {
} }
const popperConfig = this._getPopperConfig() const popperConfig = this._getPopperConfig()
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) return Popper.createPopper(referenceElement, this._menu, popperConfig)
} }
_isShown() { _isShown() {
@@ -274,10 +272,6 @@ class Dropdown extends BaseComponent {
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
} }
_detectNavbar() {
return this._element.closest(SELECTOR_NAVBAR) !== null
}
_getOffset() { _getOffset() {
const { offset } = this._config const { offset } = this._config
@@ -306,15 +300,21 @@ class Dropdown extends BaseComponent {
options: { options: {
offset: this._getOffset() offset: this._getOffset()
} }
}] },
} {
name: 'applyCustomStyles',
// Disable Popper if we have a static display or Dropdown is in Navbar enabled: true,
if (this._inNavbar || this._config.display === 'static') { phase: 'afterWrite',
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove fn: () => {
defaultBsPopperConfig.modifiers = [{ this._menu.style.removeProperty('position')
name: 'applyStyles', const initialPosition = getComputedStyle(this._menu).position
enabled: false if (this._config.display === 'static' || initialPosition === 'static') {
// this._menu.style.position = 'static'
this._menu.style.removeProperty('margin')
this._menu.style.removeProperty('transform')
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove?
}
}
}] }]
} }