diff options
Diffstat (limited to 'js/src/dropdown.js')
-rw-r--r-- | js/src/dropdown.js | 56 |
1 files changed, 15 insertions, 41 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 0ac108ab81..04c299600e 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -5,6 +5,8 @@ * -------------------------------------------------------------------------- */ +import * as Popper from '@popperjs/core' + import { getjQuery, onDOMContentLoaded, @@ -18,7 +20,6 @@ import { import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' -import Popper from 'popper.js' import SelectorEngine from './dom/selector-engine' import BaseComponent from './base-component' @@ -58,7 +59,6 @@ const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPSTART = 'dropstart' const CLASS_NAME_MENUEND = 'dropdown-menu-end' const CLASS_NAME_NAVBAR = 'navbar' -const CLASS_NAME_POSITION_STATIC = 'position-static' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_FORM_CHILD = '.dropdown form' @@ -76,7 +76,7 @@ const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start' const Default = { offset: 0, flip: true, - boundary: 'scrollParent', + boundary: 'clippingParents', reference: 'toggle', display: 'dynamic', popperConfig: null @@ -176,14 +176,7 @@ class Dropdown extends BaseComponent { } } - // If boundary is not `scrollParent`, then set position to `static` - // to allow the menu to "escape" the scroll parent's boundaries - // https://github.com/twbs/bootstrap/issues/24251 - if (this._config.boundary !== 'scrollParent') { - parent.classList.add(CLASS_NAME_POSITION_STATIC) - } - - this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig()) + this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig()) } // If this is a touch-enabled device we add extra @@ -233,6 +226,7 @@ class Dropdown extends BaseComponent { super.dispose() EventHandler.off(this._element, EVENT_KEY) this._menu = null + if (this._popper) { this._popper.destroy() this._popper = null @@ -242,7 +236,7 @@ class Dropdown extends BaseComponent { update() { this._inNavbar = this._detectNavbar() if (this._popper) { - this._popper.scheduleUpdate() + this._popper.update() } } @@ -296,44 +290,24 @@ class Dropdown extends BaseComponent { return Boolean(this._element.closest(`.${CLASS_NAME_NAVBAR}`)) } - _getOffset() { - const offset = {} - - if (typeof this._config.offset === 'function') { - offset.fn = data => { - data.offsets = { - ...data.offsets, - ...(this._config.offset(data.offsets, this._element) || {}) - } - - return data - } - } else { - offset.offset = this._config.offset - } - - return offset - } - _getPopperConfig() { const popperConfig = { placement: this._getPlacement(), - modifiers: { - offset: this._getOffset(), - flip: { - enabled: this._config.flip - }, - preventOverflow: { - boundariesElement: this._config.boundary + modifiers: [{ + name: 'preventOverflow', + options: { + altBoundary: this._config.flip, + rootBoundary: this._config.boundary } - } + }] } // Disable Popper if we have a static display if (this._config.display === 'static') { - popperConfig.modifiers.applyStyle = { + popperConfig.modifiers = [{ + name: 'applyStyles', enabled: false - } + }] } return { |