Handle dropup for Dropdown

Author: Johann-S

js/src/dropdown.js

@@ -64,8 +64,13 @@ const Dropdown = (($) => {
     VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
   }
 
+  const AttachmentMap = {
+    TOP    : 'top',
+    BOTTOM : 'bottom'
+  }
+
   const Default = {
-    placement   : 'bottom',
+    placement   : AttachmentMap.BOTTOM,
     offset      : 0
   }
 
@@ -141,8 +146,10 @@ const Dropdown = (($) => {
         return false
       }
 
+      // Handle dropup
+      const dropdownPlacement = $(this).parent().hasClass('dropup') ? AttachmentMap.TOP : context._config.placement
       this._popper = new Popper(this, context._menu, {
-        placement : context._config.placement,
+        placement : dropdownPlacement,
         modifiers : {
           offset : {
             offset : context._config.offset

js/tests/unit/tooltip.js

@@ -456,7 +456,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    var containerHTML = '<div>'
+    var containerHTML = '<div id="test">'
         + '<p style="margin-top: 200px">'
         + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
         + '</p>'
@@ -482,7 +482,12 @@ $(function () {
       })
       .on('shown.bs.tooltip', function () {
         var $tooltip = $($(this).data('bs.tooltip').tip)
-        assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
+        if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+          assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top))
+        }
+        else {
+          assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
+        }
         done()
       })
       .bootstrapTooltip('show')

js/tests/visual/dropdown.html

@@ -58,6 +58,19 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </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>
+    </div>
     </div>
 
     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>

scss/_dropdown.scss

@@ -23,6 +23,8 @@
   }
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
   .dropdown-toggle {
     &::after {
@@ -133,9 +135,3 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set.
-
-//.dropup {}