Better management of dropdown/dropup with alignment

2 files changed, 54 insertions, 32 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 846746384b..acc3ed453a 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -68,8 +68,10 @@ const Dropdown = (($) => {
   }
 
   const AttachmentMap = {
-    TOP    : 'top-start',
-    BOTTOM : 'bottom-start'
+    TOP       : 'top-start',
+    TOPEND    : 'top-end',
+    BOTTOM    : 'bottom-start',
+    BOTTOMEND : 'bottom-end'
   }
 
   const Default = {
@@ -144,21 +146,21 @@ const Dropdown = (($) => {
         return
       }
 
-      // Handle dropup
-      const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
-      this._popper = new Popper(this._element, this._menu, {
-        placement : dropdownPlacement,
+      let element = this._element
+      // for dropup with alignment we use the parent as popper container
+      if ($(parent).hasClass(ClassName.DROPUP)) {
+        if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
+          element = parent
+        }
+      }
+      this._popper = new Popper(element, this._menu, {
+        placement : this._getPlacement(),
         modifiers : {
           offset : {
             offset : this._config.offset
           },
           flip : {
             enabled : this._config.flip
-          },
-          beforeApplyStyle: {
-            order: 899, // 900 is the order of applyStyle
-            enabled: true,
-            fn: this._beforePopperApplyStyle
           }
         }
       })
@@ -238,21 +240,23 @@ const Dropdown = (($) => {
       return this._menu
     }
 
-    _beforePopperApplyStyle(data) {
-      if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
-        data.styles = {
-          right: 0,
-          left: 'auto'
+    _getPlacement() {
+      const $parentDropdown = $(this._element).parent()
+      let placement = this._config.placement
+
+      // Handle dropup
+      if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
+        placement = AttachmentMap.TOP
+        if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
+          placement = AttachmentMap.TOPEND
         }
       }
-
-      if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
-        data.styles = {
-          right: 'auto',
-          left: 0
+      else {
+        if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
+          placement = AttachmentMap.BOTTOMEND
         }
       }
-      return data
+      return placement
     }
 
     // static
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 166cbf7259..fee096c6c8 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -61,11 +61,10 @@
 
       <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">Dropup split</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>
+              <span class="sr-only">Dropup split</span>
             </button>
             <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Action</a>
@@ -74,6 +73,15 @@
             </div>
           </div>
 
+          <div class="btn-group dropup">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</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
@@ -84,20 +92,30 @@
               <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
+        </div>
+        <div class="col-sm-12 mt-4">
+          <div class="btn-group dropup" role="group">
+            <a href="#" class="btn btn-secondary">Dropup split align right</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="sr-only">Product actions</span>
             </button>
-            <div class="dropdown-menu dropdown-menu-left">
+            <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>
+              <button class="dropdown-item" type="button">Something else here with a long text</button>
             </div>
           </div>
+          <div class="btn-group dropup">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</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 with a long text</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>