Dropdown: Merge `display='static'` & `isNavbar` functionality activating static popper with no styles attached

2 files changed, 10 insertions, 19 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 06f69af7be..d5c42b012d 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -133,12 +133,8 @@ class Dropdown extends BaseComponent {
     }
 
     const parent = getElementFromSelector(this._element) || this._element.parentNode
-    // Totally disable Popper for Dropdowns in Navbar
-    if (this._inNavbar) {
-      Manipulator.setDataAttribute(this._menu, 'popper', 'none')
-    } else {
-      this._createPopper(parent)
-    }
+
+    this._createPopper(parent)
 
     // If this is a touch-enabled device we add extra
     // empty mouseover listeners to the body's immediate children;
@@ -246,13 +242,7 @@ class Dropdown extends BaseComponent {
     }
 
     const popperConfig = this._getPopperConfig()
-    const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
-
     this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
-
-    if (isDisplayStatic) {
-      Manipulator.setDataAttribute(this._menu, 'popper', 'static')
-    }
   }
 
   _isShown(element = this._element) {
@@ -319,8 +309,9 @@ class Dropdown extends BaseComponent {
       }]
     }
 
-    // Disable Popper if we have a static display
-    if (this._config.display === 'static') {
+    // Disable Popper if we have a static display or Dropdown is in Navbar
+    if (this._inNavbar || this._config.display === 'static') {
+      Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove
       defaultBsPopperConfig.modifiers = [{
         name: 'applyStyles',
         enabled: false
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index bec0aae62e..aec70063ec 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1054,7 +1054,7 @@ describe('Dropdown', () => {
       btnDropdown.click()
     })
 
-    it('should not use Popper in navbar', done => {
+    it('should not use "static" Popper in navbar', done => {
       fixtureEl.innerHTML = [
         '<nav class="navbar navbar-expand-md navbar-light bg-light">',
         '  <div class="dropdown">',
@@ -1071,8 +1071,8 @@ describe('Dropdown', () => {
       const dropdown = new Dropdown(btnDropdown)
 
       btnDropdown.addEventListener('shown.bs.dropdown', () => {
-        expect(dropdown._popper).toBeNull()
-        expect(dropdownMenu.getAttribute('style')).toBeNull()
+        expect(dropdown._popper).not.toBeNull()
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
         done()
       })
 
@@ -1120,7 +1120,7 @@ describe('Dropdown', () => {
       dropdown.show()
     })
 
-    it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => {
+    it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', done => {
       fixtureEl.innerHTML = [
         '<nav class="navbar navbar-expand-md navbar-light bg-light">',
         '  <div class="dropdown">',
@@ -1137,7 +1137,7 @@ describe('Dropdown', () => {
       const dropdown = new Dropdown(btnDropdown)
 
       btnDropdown.addEventListener('shown.bs.dropdown', () => {
-        expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none')
+        expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
         dropdown.hide()
       })