Requirement
I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue:
Issue
When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works perfectly when the input field is outside the dropdown code. However, it works flawlessly on other browsers like Google Chrome.
- Firefox version: 26
- Bootstrap version: 3.03
- jQuery: 1.10
Question:
How can I resolve this problem? Could the issue be related to jQuery or Twitter's JavaScript, considering it functions properly when I move the input field outside the dropdown?
Fiddle
Here is the fiddle demonstrating the same issue: http://jsfiddle.net/santoshjoshi/WKU6M/3/
Code:
<div id="navbar-example" class="navbar navbar-static">
<div class="container" style="width: auto;">
<div class="nav-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav pull-left">
<li id="sign-up-dropdown" class="dropdown closed noshow">
<a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown">Sign Up<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation">
<div class="login_dropdown platform-font-1">
<form class="form-horizontal" action="login" method="POST">
<div class="form-group">
<div class="col-lg-10">
<input type="text" class="form-control " id="email" name="email" placeholder="Email"> </input>
</div>
</div>
</form>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Arrow keys work with the below input but not with the one inside the dropdown menu -->
<input type="text" class="form-control " id="email1" name="email" placeholder="Email"> </input>