Can't click on dropdown on bootstrap navbar after something else on navbar has been clicked - asp.net-mvc

Question

I have a normal bootstrap navbar with some drop downs on it. When I click on a link in a drop down a modal box appears on screen, when I exit the modal box and then try to click on the drop down again on the navbar it won't work, an orange square border appears around the dropdown as if it can't get focus again or something. Any ideas why this could be happening?
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="navbar-inner" id="background">
<a class="brand" href="#Url.Action("RssIndex", "Home")">
<img src="~/Images/iconnewzy.png" alt="Newzy" ></a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>
<label style="display: inline; cursor: pointer;" id="friendsId">Friends</label><b class="caret"></b></a>
<ul class="dropdown-menu">
Add Friend
View Friends
</ul>
</li>
<b style="vertical-align: bottom !important; color: white">Hello, #User.Identity.Name!</b>
#Html.ActionLink("Log off", "LogOff", "Account", routeValues: null, htmlAttributes: new { #class = "btn btn-mini btn-primary" })
</ul>
</div>
</div>

Answer 1

I had the same problem. I've found a workaround in this article. Basically, you have to add this code to your page:
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});