CODEWITHSUNDEEP
jquerytwitter-bootstrap
Robert Araujo
Robert Araujo

Reputation: 137

Bootstrap input field autofocus doesn't let you type

I'm using bootstrap, and I have an input field with a drop down where the user can either click on the button or the input field to get the drop down. Now here lies the issue when the user clicks on the input field they can't type anymore :/

I've tried autofocus and no luck, can any one take a look.

Thank you.

Here is my code:

<div class="container">
<div class="row" style="padding:100px 0 0">
<div class="col-md-5">
<div class="input-group" style="padding: 0 0 10px 0;">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action 
<span class="caret"></span>    </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <!-- /btn-group -->
    <input type="text" class="form-control inputBut" aria-label="...">
  </div>

  <!-- /input-group -->   
      <p class="well well-sm">When a user clicks on the input field to type the focus doesn't stay and the user can't type :/.</p>
</div>
</div>
</div>
<script>
$(function () {
$('.form-control').each(function() {
    $(this).click(function() {
        if ($(this).hasClass('inputBut')) {
setTimeout(function() {$('.input-group-btn     button').click();},10);
        } else {
            $(this).parent().find('.input-group-addon').click();
        }
    });
});
});
</script>

JSFiddle

Upvotes: 1

Views: 707

Answers (1)

himawan_r
himawan_r

Reputation: 1780

From this logic on this line

$('.input-group-btn button').click();

I guessing that you want to trigger a click and expand the dropdown whenever you click on the textbox, actually you could simply

$('.input-group-btn').addClass("open");

here is jsfiddle for you, but i'm still dont get what the else condition trying to achieve on this line 

$(this).parent().find('.input-group-addon').click();

you don't even have that class on your html

Upvotes: 1

Related Questions