Links and ng clicks in Bootstrap dropdown not working in Chrome 48 for Windows 8.1
I have a Bootstrap dropdown in my navbar app with some links in it. Some links have triggers ng-click
and others have regular links. The following code works fine in all major browsers on Mac OS 10.11 as well as Windows 7. On Windows 8, it works in IE 11, but not in Chrome 48 (the latter). In Chrome 48, clicking on a link in the dropdown will close the dropdown, but ng-click
either the link href
won't launch. There are no errors in the console and I have confirmed that there are no browser extensions that might be causing the problem.
<li class="dropdown">
<div class="dropdown-toggle" style="width:initial;">
<div class="dropdown-link nav-dropdown-link" id="dropdownMenuAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= current_employer.email %> <i class="fa fa-caret-down"></i>
</div>
<ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuAccount">
<li>
<a href="#" ng-click="setTab('/setup?tab=account');"><i class="fa fa-fw fa-user"></i> My Account</a>
</li>
<% if current_employer.role == 'Admin' %>
<li>
<a href="#" ng-click="setTab('/setup?tab=users');"><i class="fa fa-fw fa-user-plus"></i> Users</a>
</li>
<% end %>
<li><%= link_to "<i class='fa fa-fw fa-credit-card'></i> Billing".html_safe, update_payment_path %></li>
<li><%= link_to "<i class='fa fa-fw fa-sign-out'></i> Sign Out".html_safe, destroy_employer_session_path, :method => :delete %></li>
</ul>
</div>
</li>
Update
After some testing I have determined what the main problem is, however I am still not sure how to solve it. First, I attached a click listener to the document:
$(document).on('click', function(e) { console.log(e.target) })
When I did this in other browsers, the result was what I suspected. By clicking on a dropdown-toggle
div, you will open the menu registered by clicking on that element. Then, by clicking an item in the dropdown, the click is registered on the tag of the a
dropdown, so it triggers the link or ng-click
attached to that item a
.
When I ran this code on Chrome 48 for Windows 8.1, clicks on items in the dropdown were registering as clicks on a dropdown-toggle
div.
It seems that for Chrome 48 on Windows 8.1, events fail to propagate through the DOM tree from div
to the target element a
.
Update # 2
I just upgraded from jQuery 1.11.3 to 1.12.0 to see if this will affect the click propagation issue. Unfortunately, the behavior is the same as before.
source to share
Finally solved my own problem. Wanting to leave a rock without rocks, I pushed Bootstrap version 3.3.4 to 3.3.5 and re-tested click propagation using jQuery snippet from the first update to my question. When I did this, the propagation stopped at the dropdown-backdrop
div instead of the button, which brought me to the background existence. Then I realized that if I hide the dropdown background like this post , the problem goes away!
Unfortunately, this answer contains a few caveats:
- I don't know how this decision affects mobile, what the background is supposed to be. In my case, this is not a problem as the project is not designed for mobile devices anyway.
- I still don't know why click propagation is only broken in Chrome for Windows 8, so this is a solution at its best.
Hope this helps someone else along the way. It was pretty painful to debug.
source to share