Dropdown - Allow to disable Popper.js style

twbs · Jan 21, 2018 · faa1e07 · faa1e07
1 parent db70164
commit faa1e07
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 5 deletions.
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
@@ -778,6 +778,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>'toggle'</td>
       <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#referenceObject">referenceObject 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
@@ -75,14 +75,16 @@ const Dropdown = (($) => {
     offset      : 0,
     flip        : true,
     boundary    : 'scrollParent',
-    reference   : 'toggle'
+    reference   : 'toggle',
+    display     : 'dynamic'
   }
 
   const DefaultType = {
     offset      : '(number|string|function)',
     flip        : 'boolean',
     boundary    : '(string|element)',
-    reference   : '(string|element)'
+    reference   : '(string|element)',
+    display     : 'string'
   }
 
   /**
@@ -295,6 +297,12 @@ const Dropdown = (($) => {
         }
       }
 
+      // Disable Popper.js if we have a static display
+      if (this._config.display === 'static') {
+        popperConfig.modifiers.applyStyle = {
+          enabled: false
+        }
+      }
       return popperConfig
     }
 

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
@@ -908,4 +908,34 @@ $(function () {
       })
     $textarea.trigger('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
@@ -164,17 +164,17 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="row">
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-secondary" data-offset="10,20">Dropdown offset</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown offset</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>
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-secondary">Dropdown reference</button>
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
@@ -187,7 +187,20 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
         </div>
+        <div class="col-sm-3 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 menu without Popper.js
+            </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>
 
     </div>