Dropdown - Allow to disable Popper.js style (#24092)

* Dropdown - Allow to disable Popper.js style

* Update dropdown.js

* Update dropdown.html

* copy changes

Author: Johann-S

docs/4.0/components/dropdowns.md

@@ -807,6 +807,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 for dynamic positioning. Disable this with `static`.</td>
+    </tr>
   </tbody>
 </table>
 

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
     }
 

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')
+  })
 })

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,6 +187,18 @@ <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>