Avoid having to double-click to toggle Bootstrap dropdown

javascript css angularjs twitter-bootstrap angular-ui-bootstrap

52,608

Solution 1

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

Solution 2

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.

Solution 3

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/

Solution 4

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.

Solution 5

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;
});

View more solutions

52,608

Author by

Jago

Updated on July 05, 2022

Comments

Jago almost 2 years

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?
Jago almost 10 years

Perfect! However I am somehow surprised they don't already include this in their bootstrap js file.
rdougan almost 10 years

I'm guessing that when using just Bootstrap, using href is the expected behaviour. However when using Angular, you don't want to use that. It sucks, though.
user1322092 over 9 years

WOW!!! I have exactly the same issue! I'm using ui-bootstrap and angular. Works well know.. thanks for sharing!!
haotang over 9 years

Thanks. Worked like a charm :)
kba over 9 years

This was fixed in UI-Bootstrap 0.12. To anybody who had this problem after having upgraded to 0.12, simply add back data-toggle="dropdown" as you've removed previously.
Backo over 5 years

It seems to solve the problem, but what are the implications e.g. of using only the bootstrap.bundle.min.js?
Backo over 5 years

What about this, this, this or this? There are issues by using only the bootstrap.bundle.min.js?
Backo over 5 years

It seems to solve the problem, but what are the implications e.g. of using only the bootstrap.bundle.min.js?
Devil Bro over 5 years

Yes. use anyone of those. I suggest to use bootstrap.bundle.min.js . Because we don't need to add popper.js and other dependencies.
system7 almost 5 years

OMG! You are the Man! :D
jmp over 4 years

thx fixed the problem, I thought that somewhere a double event
Arunprasanth K V about 4 years

cool , i also faced the same issue . thanks for the answer man
Harm almost 4 years

And that's the real winner. Solves this issue complete. Also keep in mind to load jquery before bootstrap. In my case jQuery 3.4.1 and Bootstrap 4.3.1.
PraBhu almost 4 years

bootstrap.bundle.min.js comes with some extra features along with bootstrap js like popperjs. If your application is using popperjs and bootstrap, you can include the bootstrap.bundle.min.js. If not, you don't want to include bundle js with the larger size.
briosheje almost 4 years

2020 and angular 9.1.7: this anwer still saved me. In angular 9.0.7 the issue didn't exist.
Shmack over 3 years

Idk if this is a good, solution,but... it works... so... I'm just going to pretend its the best... You're a genius, +1 vote.
Antony over 3 years

Super answer. Was using a datatables bundle AND separate bs4 include so removing it from the bundle fixed it. Thanks.
Artem Kozlenkov about 3 years

2021 only the removing of the bootstrap.bundle.min.js solved the issue, drawback still unknown
KumarHarsh almost 3 years

in my case bootstrap.min.js was refered twice.I removed one.