Skip to content

Commit

Permalink
Dropdown - Allow to disable Popper.js style
Browse files Browse the repository at this point in the history
  • Loading branch information
Johann-S committed Jan 21, 2018
1 parent db70164 commit faa1e07
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 5 deletions.
6 changes: 6 additions & 0 deletions docs/4.0/components/dropdowns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
12 changes: 10 additions & 2 deletions js/src/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}

/**
Expand Down Expand Up @@ -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
}

Expand Down
30 changes: 30 additions & 0 deletions js/tests/unit/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
19 changes: 16 additions & 3 deletions js/tests/visual/dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>

Expand Down

0 comments on commit faa1e07

Please sign in to comment.