diff options
| author | 719media <[email protected]> | 2018-01-21 10:09:23 -0800 |
|---|---|---|
| committer | Johann-S <[email protected]> | 2018-01-21 19:09:23 +0100 |
| commit | bd9084d24900325b0559741c8c227cfdab2f22a0 (patch) | |
| tree | 144a9a9af731a074dc23eab5c9aa9297c4cdaa65 /js | |
| parent | a098de125fdb41efb1d8f03e323bcc4360372cf7 (diff) | |
| download | bootstrap-bd9084d24900325b0559741c8c227cfdab2f22a0.tar.xz bootstrap-bd9084d24900325b0559741c8c227cfdab2f22a0.zip | |
Update dropdown.js to allow referenceElement (#25219)
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/dropdown.js | 25 | ||||
| -rw-r--r-- | js/tests/visual/dropdown.html | 26 |
2 files changed, 43 insertions, 8 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 2ee37f628..82deaa220 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -74,13 +74,15 @@ const Dropdown = (($) => { const Default = { offset : 0, flip : true, - boundary : 'scrollParent' + boundary : 'scrollParent', + reference : 'toggle' } const DefaultType = { offset : '(number|string|function)', flip : 'boolean', - boundary : '(string|element)' + boundary : '(string|element)', + reference : '(string|element)' } /** @@ -150,20 +152,27 @@ const Dropdown = (($) => { if (typeof Popper === 'undefined') { throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)') } - let element = this._element - // For dropup with alignment we use the parent as popper container - if ($(parent).hasClass(ClassName.DROPUP)) { - if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { - element = parent + + let referenceElement = this._element + + if (this._config.reference === 'parent') { + referenceElement = parent + } else if (Util.isElement(this._config.reference)) { + referenceElement = this._config.reference + + // Check if it's jQuery element + if (typeof this._config.reference.jquery !== 'undefined') { + referenceElement = this._config.reference[0] } } + // 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).addClass(ClassName.POSITION_STATIC) } - this._popper = new Popper(element, this._menu, this._getPopperConfig()) + this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig()) } // If this is a touch-enabled device we add extra diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index b2e588677..27a888f04 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -161,8 +161,34 @@ </div> </div> </div> + </div> + <div class="row"> + <div class="col-sm-12 mt-4"> + <div class="btn-group dropdown"> + <button type="button" class="btn btn-secondary" data-offset="10,20">Dropdown offset</button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </div> + </div> + <div class="col-sm-12 mt-4"> + <div class="btn-group dropdown"> + <button type="button" class="btn btn-secondary">Dropdown reference</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent"> + <span class="sr-only">Dropdown split</span> + </button> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </div> + </div> </div> + </div> <script src="../../../assets/js/vendor/jquery-slim.min.js"></script> |