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 <[email protected]>

Author: rohit2sharma95

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

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