it('should create offset modifier correctly when offset option is a function', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should create offset modifier correctly when offset option is not a function', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should add a listener on trigger which do not have data-toggle="dropdown"', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn">Dropdown</button>',
+ ' <button class="btn">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should allow to pass config to popper.js with `popperConfig`', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should destroy old popper references on toggle', done => {
fixtureEl.innerHTML = [
'<div class="first dropdown">',
- ' <button href="#" class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>',
'<div class="second dropdown">',
- ' <button href="#" class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown and add/remove event listener on mobile', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown at the right', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu dropdown-menu-right">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropup', done => {
fixtureEl.innerHTML = [
'<div class="dropup">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropup at the right', done => {
fixtureEl.innerHTML = [
'<div class="dropup">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu dropdown-menu-right">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropright', done => {
fixtureEl.innerHTML = [
'<div class="dropright">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropleft', done => {
fixtureEl.innerHTML = [
'<div class="dropleft">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown with parent reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown with a dom node reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should toggle a dropdown with a jquery object reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not toggle a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not toggle a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not toggle a dropdown if the menu is shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not toggle a dropdown if show event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should show a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not show a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not show a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not show a dropdown if the menu is shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not show a dropdown if show event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should hide a dropdown and destroy popper', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not hide a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not hide a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not hide a dropdown if the menu is not shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not hide a dropdown if hide event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should dispose dropdown', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should dispose dropdown with popper.js', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should call popper.js and detect navbar on update', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should just detect navbar on update', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not add class position-static to dropdown if boundary not set', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should add class position-static to dropdown if boundary not scrollParent', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should show and hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should not use popper.js if display set to static', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should remove "show" class if tabbing outside of menu', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
it('should fire hide and hidden event without a clickEvent if event type is not click', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' </div>',
it('should ignore keyboard events within <input>s and <textarea>s', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' <input type="text" />',
it('should skip disabled element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
' <button class="dropdown-item" type="button" disabled>Disabled button</button>',
' }',
'</style>',
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
' <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
it('should focus next/previous element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a id="item1" class="dropdown-item" href="#">A link</a>',
' <a id="item2" class="dropdown-item" href="#">Another link</a>',
it('should not close the dropdown if the user clicks on a text field', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <input type="text" />',
' </div>',
it('should not close the dropdown if the user clicks on a textarea', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <textarea></textarea>',
' </div>',
it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
- ' <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' <input type="text" />',
fixtureEl.innerHTML = [
'<div class="tabs">',
' <div class="dropdown">',
- ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+ ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' <a class="dropdown-item" href="#">Something else here</a>',