Dropdown - Disable applyStyle modifier instead of removing inline style applied by Popper.js

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'))
+  })
 })