From 308372db25c351c67092a643ce9d07113b94c2d8 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Sun, 7 Feb 2021 23:14:09 +0530 Subject: [PATCH 1/2] Create the popper instance first Make sure that popper instance has been created first and then apply the styling on the dropdown(menu) --- js/src/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 378668a6d06d..878a5a9a21d9 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 From 931c1fa2377b6cad4ca565dbb29e6ef04d0f8d03 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Sun, 7 Feb 2021 22:40:35 +0530 Subject: [PATCH 2/2] Use `data-bs-popper` attibute to check popper --- scss/_dropdown.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index b6184d2ad78d..b71058c58e5e 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