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