diff options
author | Johann-S <johann.servoire@gmail.com> | 2017-07-04 11:26:25 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2017-07-04 11:37:44 +0300 |
commit | 0480a75a5a40f2805d1f63dea3ec5eb5fad7f18e (patch) | |
tree | f1a7f139dc3cbeb1172f0366f9d1839295d9564e /js | |
parent | 6797e8421564c64fb8d27412e25fb8f7d7b19ca2 (diff) |
Dropdown - Disable applyStyle modifier instead of removing inline style applied by Popper.js
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 10 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 29 |
2 files changed, 32 insertions, 7 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 057cfa4334..234d23447d 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -265,14 +265,10 @@ const Dropdown = (($) => { } } + // Disable Popper.js for Dropdown in Navbar if (this._inNavbar) { - popperConfig.modifiers.AfterApplyStyle = { - enabled: true, - order: 901, // ApplyStyle order + 1 - fn: () => { - // reset Popper styles - $(this._menu).attr('style', '') - } + popperConfig.modifiers.applyStyle = { + enabled: !this._inNavbar } } return popperConfig diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index 7e96745ab6..e44e47bbcb 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -620,4 +620,33 @@ $(function () { }) $dropdown.trigger('click') }) + + QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) { + assert.expect(1) + var done = assert.async() + var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' + + '<div class="dropdown">' + + ' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>' + + ' <div class="dropdown-menu" aria-labelledby="dropdown">' + + ' <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>' + + '</nav>' + + $(html).appendTo('#qunit-fixture') + var $triggerDropdown = $('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown() + var $dropdownMenu = $triggerDropdown.next() + + $triggerDropdown + .parent('.dropdown') + .on('shown.bs.dropdown', function () { + assert.ok($dropdownMenu.attr('style') === undefined, 'No inline style applied by Popper.js') + done() + }) + $triggerDropdown.trigger($.Event('click')) + }) }) |