Dropdown - Allow to disable Popper.js style

twbs · Sep 25, 2017 · c9b4d25 · c9b4d25
1 parent 9b8356b
commit c9b4d25
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 5 deletions.
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
@@ -598,6 +598,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>true</td>
       <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td>
     </tr>
+    <tr>
+      <td>display</td>
+      <td>string</td>
+      <td>dynamic | static</td>
+      <td>By default we use Popper.js but if you want to disable Popper.js use `static`</td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -76,12 +76,14 @@ const Dropdown = (() => {
 
   const Default = {
     offset      : 0,
-    flip        : true
+    flip        : true,
+    display     : 'dynamic'
   }
 
   const DefaultType = {
     offset      : '(number|string)',
-    flip        : 'boolean'
+    flip        : 'boolean',
+    display     : 'string'
   }
 
 
@@ -258,10 +260,10 @@ const Dropdown = (() => {
         }
       }
 
-      // Disable Popper.js for Dropdown in Navbar
-      if (this._inNavbar) {
+      // Disable Popper.js for Dropdown in Navbar or if we have a static display
+      if (this._inNavbar || this._config.display === 'static') {
         popperConfig.modifiers.applyStyle = {
-          enabled: !this._inNavbar
+          enabled: false
         }
       }
       return popperConfig

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
@@ -649,4 +649,34 @@ $(function () {
       })
     $triggerDropdown.trigger($.Event('click'))
   })
+
+  QUnit.test('should not use Popper.js if display set to static', function (assert) {
+    assert.expect(1)
+    var dropdownHTML =
+        '<div class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</a>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item" href="#">Secondary link</a>'
+        + '<a class="dropdown-item" href="#">Something else here</a>'
+        + '<div class="divider"/>'
+        + '<a class="dropdown-item" href="#">Another link</a>'
+        + '</div>'
+        + '</div>'
+
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+    var done = assert.async()
+    var dropdownMenu = $dropdown.next()[0]
+
+    $dropdown.parent('.dropdown')
+      .on('shown.bs.dropdown', function () {
+        // Popper.js add this attribute when we use it
+        assert.strictEqual(dropdownMenu.getAttribute('x-placement'), null)
+        done()
+      })
+
+    $dropdown.trigger('click')
+  })
 })
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -114,8 +114,20 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
         </div>
+        <div class="col-sm-12 mt-4">
+          <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
+                Dropdown button
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <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>
       </div>
+    </div>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../../assets/js/vendor/popper.min.js"></script>