From 7b4d203be895cfe03ee96dcc33f720b6cd63c4c0 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Thu, 24 Feb 2022 21:56:15 +0200
Subject: [PATCH] Dropdown: support dynamic popper on navbar

---
 js/src/dropdown.js | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 601792953..316b5e736 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -54,7 +54,6 @@ const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
 const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
 const SELECTOR_MENU = '.dropdown-menu'
-const SELECTOR_NAVBAR = '.navbar'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'
 const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
 
@@ -96,7 +95,6 @@ class Dropdown extends BaseComponent {
     this._popper = null
     this._parent = this._element.parentNode // dropdown wrapper
     this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent)
-    this._inNavbar = this._detectNavbar()
   }
 
   // Getters
@@ -132,7 +130,7 @@ class Dropdown extends BaseComponent {
       return
     }
 
-    this._createPopper()
+    this._popper = this._createPopper()
 
     // If this is a touch-enabled device we add extra
     // empty mouseover listeners to the body's immediate children;
@@ -173,7 +171,6 @@ class Dropdown extends BaseComponent {
   }
 
   update() {
-    this._inNavbar = this._detectNavbar()
     if (this._popper) {
       this._popper.update()
     }
@@ -234,7 +231,7 @@ class Dropdown extends BaseComponent {
     }
 
     const popperConfig = this._getPopperConfig()
-    this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
+    return Popper.createPopper(referenceElement, this._menu, popperConfig)
   }
 
   _isShown() {
@@ -270,10 +267,6 @@ class Dropdown extends BaseComponent {
     return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
   }
 
-  _detectNavbar() {
-    return this._element.closest(SELECTOR_NAVBAR) !== null
-  }
-
   _getOffset() {
     const { offset } = this._config
 
@@ -302,15 +295,21 @@ class Dropdown extends BaseComponent {
         options: {
           offset: this._getOffset()
         }
-      }]
-    }
-
-    // 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
+      },
+      {
+        name: 'applyCustomStyles',
+        enabled: true,
+        phase: 'afterWrite',
+        fn: () => {
+          this._menu.style.removeProperty('position')
+          const initialPosition = getComputedStyle(this._menu).position
+          if (this._config.display === 'static' || initialPosition === 'static') {
+            // this._menu.style.position = 'static'
+            this._menu.style.removeProperty('margin')
+            this._menu.style.removeProperty('transform')
+            Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove?
+          }
+        }
       }]
     }