diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index b4c70478ef9e..cba13ce0394b 100644
--- 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
'toggle'
Reference element of the dropdown menu. Accepts the values of 'toggle'
, 'parent'
, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs .
+
+ display
+ string
+ dynamic | static
+ By default, we use Popper.js for dynamic positioning. Disable this with `static`.
+
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 82deaa220522..b877017f2bd5 100644
--- 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
index 97ceb6596111..3040e81b41aa 100644
--- 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 =
+ ''
+
+ 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
index 27a888f04048..e3bacc2950f2 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -164,9 +164,9 @@ Dropdown Bootstrap Visual Test
-
+
- Dropdown offset
+ Dropdown offset
-
+
Dropdown reference
@@ -187,6 +187,18 @@ Dropdown Bootstrap Visual Test
+