From 29e0c9dfa1c4324e4e2a8cf0b66e27b9e72f09a5 Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Wed, 10 Feb 2021 00:34:23 +0530
Subject: [PATCH] =?UTF-8?q?Dropdown=20=E2=80=94=20Change=20the=20selector?=
 =?UTF-8?q?=20to=20check=20the=20use=20of=20Popper=20(#33003)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 js/src/dropdown.js  |  4 ++--
 scss/_dropdown.scss | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 378668a6d0..878a5a9a21 100644
--- 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 b6184d2ad7..b71058c58e 100644
--- 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