Use popper to align dropdown menu instead of using css with important

3 files changed, 65 insertions, 28 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 39a4a86ca..846746384 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -52,8 +52,11 @@ const Dropdown = (($) => {
   }
 
   const ClassName = {
-    DISABLED : 'disabled',
-    SHOW     : 'show'
+    DISABLED  : 'disabled',
+    SHOW      : 'show',
+    DROPUP    : 'dropup',
+    MENURIGHT : 'dropdown-menu-right',
+    MENULEFT  : 'dropdown-menu-left'
   }
 
   const Selector = {
@@ -142,7 +145,7 @@ const Dropdown = (($) => {
       }
 
       // Handle dropup
-      const dropdownPlacement = $(this._element).parent().hasClass('dropup') ? AttachmentMap.TOP : this._config.placement
+      const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
       this._popper = new Popper(this._element, this._menu, {
         placement : dropdownPlacement,
         modifiers : {
@@ -151,6 +154,11 @@ const Dropdown = (($) => {
           },
           flip : {
             enabled : this._config.flip
+          },
+          beforeApplyStyle: {
+            order: 899, // 900 is the order of applyStyle
+            enabled: true,
+            fn: this._beforePopperApplyStyle
           }
         }
       })
@@ -230,6 +238,23 @@ const Dropdown = (($) => {
       return this._menu
     }
 
+    _beforePopperApplyStyle(data) {
+      if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
+        data.styles = {
+          right: 0,
+          left: 'auto'
+        }
+      }
+
+      if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
+        data.styles = {
+          right: 'auto',
+          left: 0
+        }
+      }
+      return data
+    }
+
     // static
 
     static _jQueryInterface(config) {
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 45c5d5172..166cbf725 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -59,19 +59,45 @@
         </li>
       </ul>
 
-    <!-- Default dropup button -->
-    <div class="btn-group dropup" style="margin-top: 60px;">
-      <button type="button" class="btn btn-secondary">Dropup</button>
-      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <span class="sr-only">Toggle Dropdown</span>
-      </button>
-      <div class="dropdown-menu">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
+      <div class="row">
+        <div class="col-sm-12 mt-4">
+          <!-- Default dropup button -->
+          <div class="btn-group dropup">
+            <button type="button" class="btn btn-secondary">Dropup</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="sr-only">Toggle Dropdown</span>
+            </button>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+            </div>
+          </div>
+
+          <div class="btn-group">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              This dropdown's menu is right-aligned
+            </button>
+            <div class="dropdown-menu dropdown-menu-right">
+              <button class="dropdown-item" type="button">Action</button>
+              <button class="dropdown-item" type="button">Another action</button>
+              <button class="dropdown-item" type="button">Something else here</button>
+            </div>
+          </div>
+
+          <div class="btn-group">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              This dropdown's menu is left-aligned
+            </button>
+            <div class="dropdown-menu dropdown-menu-left">
+              <button class="dropdown-item" type="button">Action</button>
+              <button class="dropdown-item" type="button">Another action</button>
+              <button class="dropdown-item" type="button">Something else here</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    </div>
 
     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 981a17cb8..d9e75b0aa 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -108,20 +108,6 @@
   }
 }
 
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto !important; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto !important;
-  left: 0;
-}
-
 .dropdown-menu.show {
   display: block;
 }