Permalink
Browse files

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

* Dropdown - Allow to disable Popper.js style

* Update dropdown.js

* Update dropdown.html

* copy changes
  • Loading branch information...
Johann-S authored and mdo committed Feb 12, 2018
1 parent ba878eb commit 65ae622d4061efc5f62628d7d607358476f8f345
Showing with 61 additions and 5 deletions.
  1. +6 −0 docs/4.0/components/dropdowns.md
  2. +10 −2 js/src/dropdown.js
  3. +30 −0 js/tests/unit/dropdown.js
  4. +15 −3 js/tests/visual/dropdown.html
@@ -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>
View
@@ -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
}
View
@@ -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')
})
})
@@ -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>

0 comments on commit 65ae622

Please sign in to comment.