Avoid having to double-click to toggle Bootstrap dropdown

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Removing the data-toggle="dropdown" will fix the issue.

Opening the dropdown with one click will work after this.

Reference: https://github.com/angular-ui/bootstrap/issues/2294

In Bootstrap 4, bootstrap.min.js and bootstrap.bundle.min.js now conflict in dropdown.

By removing bootstrap.min.js, the dropdown double click issue will resolved.

This may happen if somehow Bootstrap is included twice in your project.

If bootstrap.min.js and bootstrap.bundle.min.js(bootstrap and popper js) both included in project, it means redundant bootstrap js.

The js combination should be like this: Either : bootstrap.bundle.min.js only Or : bootstrap.min.js AND popper.min.js For detailed information, visit https://getbootstrap.com/docs/4.1/getting-started/contents/

In BootStrap 4, One should not include both "bootstrap.bundle.min.js" and "bootstrap.min.js". This will cause the DropDown issue. Only Keep "bootstrap.bundle.min.js" as it will have all required code.

This happens because the Twitter Bootstrap syntax for their drop downs include a href tag. You will need to preventDefault and stopPropagation to prevent this from happening. Something like this will do the trick:

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});

Like @rajaneesh-singh told us above, this bug occurs when Bootstrap is included twice.

In my case, I had a duplicate with the offical bootstrap and with the twitter version:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>

I just removed the twitter version and everything is working well now.

I had the same issue as jaybro in https://stackoverflow.com/a/27278529/1673289, however their solution didn't help.

The way to fix for both cases was to add:

data-disabled="true"

onto the element which has the data-toggle="dropdown" attribute.

I solved the issue by removing link to bootstrap.bundle.js and adding a link to popper.js

Before

<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

After

<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

Note that I downloaded the bootstrap files and stored them in a directory called 'bootstrap'. Inside it I had three different directories 'css', 'js', 'jquery'.

if use bootstrap4, remove bootstrap.bundle.min.js. I had the same problem and it was fixed

In my case, the other answers don't work.

In application.js, I had:

//= require popper.min
//= require bootstrap-sprockets

Removing bootstrap-sprockets fixed the problem.

By looking within the source code of angular.ui.bootstrap and the native bootstrap.js they have both handlers for dropdowns.

Proposed Solution: adjust angular.ui.bootstrap dropdownToggle directive restrict only to "A" attributes. so by resolving this issue you need to modify dropdownToggle restrict "CA" into "A" this will hide Class looker from angular.ui.bootstrap which has been already handled by bootstrap.js

for the minified version of angular.ui.bootstrap look for this line directive("dropdownToggle",function(){return{restrict:"CA",require:"?^dropdown",link:function(a,b,c,d){

replace "CA" with "A".

Cheers

This may also happen if you have more than one bootstrap.js files! Check if you still have an older version and remove that script.

I came across the same issue recently, i solved it by writing custom script:

   <div class="filter-dropdown text-right">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Link 1</a>
         <a class="dropdown-item" href="#">Link 2</a>
         <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </div>
    
    
    
    $(".filter-dropdown").on("click", ".dropdown-toggle", function(e) { 
        e.preventDefault();
        $(this).parent().addClass("show");
        $(this).attr("aria-expanded", "true");
        $(this).next().addClass("show"); 
      });

I found that on some pages I would have to double click and other pages were single click.

Removing data-toggle="dropdown" made the double clicks into single and broke the singles.

I compared the html in the dev tool (because the same html is being served) and found on my double click pages the div with data-toggle looked like this:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
     aria-haspopup="true" aria-expanded="false">

But the single click html looks like this:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">

So, in the document ready, I used attr detection and the prevent default answer and it made my double click opens into single click opens:

if (!($('#notifications').attr('aria-haspopup') == undefined &&
    $('#notifications').attr('aria-expanded') == undefined))
{
    $('.dropdown-toggle').click(function (e) { return false; });
}