Dropdown — Change the selector to check the use of Popper (#33003)

* Create the popper instance first

Make sure that popper instance has been created first and then apply the
styling on the dropdown(menu)

* Use `data-bs-popper` attibute to check popper

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 378668a6d06d35a0dc9eda82a0190cc684e2af4f..878a5a9a21d9ec586fdc5821cbb6e39dff55f044 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -181,11 +181,11 @@ 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')
       }
-
-      this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
     }
 
     // If this is a touch-enabled device we add extra

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b6184d2ad78dfc387e8de0619eeb927798cee6df..b71058c58e5e9a966078bba6ce5920002b7df264 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -34,6 +34,7 @@
 
   &[data-bs-popper] {
     left: 0;
+    margin-top: $dropdown-spacer;
   }
 }
 
@@ -73,7 +74,7 @@
     top: auto;
     bottom: 100%;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-bottom: $dropdown-spacer;
     }
@@ -90,7 +91,7 @@
     right: auto;
     left: 100%;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-left: $dropdown-spacer;
     }
@@ -110,7 +111,7 @@
     right: 100%;
     left: auto;
 
-    &.show:not([data-popper-placement]) {
+    &[data-bs-popper] {
       margin-top: 0;
       margin-right: $dropdown-spacer;
     }
@@ -187,10 +188,6 @@
 
 .dropdown-menu.show {
   display: block;
-
-  &:not([data-popper-placement]) {
-    margin-top: $dropdown-spacer;
-  }
 }
 
 // Dropdown section headers