diff options
author | Johann-S <johann.servoire@gmail.com> | 2018-02-12 03:45:59 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2018-02-12 03:45:59 +0300 |
commit | 65ae622d4061efc5f62628d7d607358476f8f345 (patch) | |
tree | a134fac601079bcf0c88a3e8789f0b696f38620d /js | |
parent | ba878eb542ab6c04786741569ba089d02e9bea46 (diff) |
Dropdown - Allow to disable Popper.js style (#24092)
* Dropdown - Allow to disable Popper.js style
* Update dropdown.js
* Update dropdown.html
* copy changes
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 12 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 30 | ||||
-rw-r--r-- | js/tests/visual/dropdown.html | 18 |
3 files changed, 55 insertions, 5 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 82deaa2205..b877017f2b 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -75,14 +75,16 @@ const Dropdown = (($) => { offset : 0, flip : true, boundary : 'scrollParent', - reference : 'toggle' + reference : 'toggle', + display : 'dynamic' } const DefaultType = { offset : '(number|string|function)', flip : 'boolean', boundary : '(string|element)', - reference : '(string|element)' + reference : '(string|element)', + display : 'string' } /** @@ -295,6 +297,12 @@ const Dropdown = (($) => { } } + // Disable Popper.js if we have a static display + if (this._config.display === 'static') { + popperConfig.modifiers.applyStyle = { + enabled: false + } + } return popperConfig } diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index 97ceb65961..3040e81b41 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -908,4 +908,34 @@ $(function () { }) $textarea.trigger('click') }) + + QUnit.test('should not use Popper.js if display set to static', function (assert) { + assert.expect(1) + var dropdownHTML = + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + var $dropdown = $(dropdownHTML) + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown() + var done = assert.async() + var dropdownMenu = $dropdown.next()[0] + + $dropdown.parent('.dropdown') + .on('shown.bs.dropdown', function () { + // Popper.js add this attribute when we use it + assert.strictEqual(dropdownMenu.getAttribute('x-placement'), null) + done() + }) + + $dropdown.trigger('click') + }) }) diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 27a888f040..e3bacc2950 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -164,9 +164,9 @@ </div> <div class="row"> - <div class="col-sm-12 mt-4"> + <div class="col-sm-3 mt-4"> <div class="btn-group dropdown"> - <button type="button" class="btn btn-secondary" data-offset="10,20">Dropdown offset</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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> @@ -174,7 +174,7 @@ </div> </div> </div> - <div class="col-sm-12 mt-4"> + <div class="col-sm-3 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"> @@ -187,6 +187,18 @@ </div> </div> </div> + <div class="col-sm-3 mt-4"> + <div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false"> + Dropdown menu without Popper.js + </button> + <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <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> |