Add data bs attribute in dropdown for Popper

twbs · Feb 5, 2021 · e41c02c · e41c02c
1 parent 87b7250
commit e41c02c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -156,7 +156,9 @@ class Dropdown extends BaseComponent {
     }
 
     // Totally disable Popper for Dropdowns in Navbar
-    if (!this._inNavbar) {
+    if (this._inNavbar) {
+      Manipulator.setDataAttribute(this._element, 'popper', 'none')
+    } else {
       if (typeof Popper === 'undefined') {
         throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
       }
@@ -176,7 +178,14 @@ class Dropdown extends BaseComponent {
         referenceElement = this._config.reference
       }
 
-      this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
+      const popperConfig = this._getPopperConfig()
+      const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
+
+      if (isDisplayStatic) {
+        Manipulator.setDataAttribute(this._element, 'popper', 'static')
+      }
+
+      this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
     }
 
     // If this is a touch-enabled device we add extra
@@ -218,6 +227,7 @@ class Dropdown extends BaseComponent {
 
     this._menu.classList.toggle(CLASS_NAME_SHOW)
     this._element.classList.toggle(CLASS_NAME_SHOW)
+    Manipulator.removeDataAttribute(this._element, 'popper')
     EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
   }
 
@@ -427,6 +437,7 @@ class Dropdown extends BaseComponent {
 
       dropdownMenu.classList.remove(CLASS_NAME_SHOW)
       toggles[i].classList.remove(CLASS_NAME_SHOW)
+      Manipulator.removeDataAttribute(toggles[i], 'popper')
       EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
     }
   }

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -45,7 +45,7 @@
     .dropdown-menu#{$infix}-start {
       --bs-position: start;
 
-      [data-bs-display="static"] ~ & {
+      [data-bs-popper] ~ & {
         right: auto #{"/* rtl:ignore */"};
         left: 0 #{"/* rtl:ignore */"};
       }
@@ -54,7 +54,7 @@
     .dropdown-menu#{$infix}-end {
       --bs-position: end;
 
-      [data-bs-display="static"] ~ & {
+      [data-bs-popper] ~ & {
         right: 0 #{"/* rtl:ignore */"};
         left: auto #{"/* rtl:ignore */"};
       }