The Lazy Log The Lazy Log - 18 days ago 4x
HTML Question

Bootstrap Dropdown always get focused when pressing enter key in form

I have a form with different fields inside. And I am using a dropdown button instead of normal select tag for better user experience. However, the problem is that this dropdown always gets focused when I press enter key on other text input fields. This is annoying and causing trouble.

<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<span class="dropdown-label">
<button data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
<span class="caret"></span>
<ul class="dropdown-menu dropdown-select" role="menu">
Testing 1
Testing 2
<div class="col-md-6">
<input type="text" class="form-control"/>

Here is the JS fiddle:

Do you guys have any idea why is that?


Seem like somehow by default when the enter key was pressed inside the textbox, it'll trigger the click event on your dropdown. You can use e.preventDefault() or return false in order to prevent this default behavior:

    if(e.keyCode == 13) {
        return false;

Updated Fiddle