Focus input field in Bootstrap dropdown menu

Question

I'm having a hard time focusing an input field in the drop down menu of Twitter Bootstrap. My html markup is as follows:

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    Groups <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Friends <i class="icon-ok pull-right"></i></a></li>
     <li><a href="#">Family <i class="icon-ok pull-right"></i></a></li>
     <li><a href="#">Other</a></li>
     <li class="divider" />
     <li><input type="text" class="input-block-level" placeholder="New group" /></li>
  </ul>
</div>

I've also created a jsFiddle for this: http://jsfiddle.net/Yppqw/2/

Can please tell me how to keep the drop down visible when focusing the input field

Duplicate question here: http://stackoverflow.com/questions/8110356/dropdown-with-a-form-inside-with-twitter-bootstrap — zanegray, Feb 12 '13 at 19:49
thanks, @zanegray. didn't find that one. closing this question — Tim Skauge, Feb 12 '13 at 19:51

score 1 · Answer 1 · answered Feb 12 '13 at 20:00

1

Try adding a 'dropdown' class to your element with 'the btn-group' class

You can probably remove that btn-group class unless you plan on having other buttons next to this one.

answered Feb 12 '13 at 20:00

Alan Jenkins

344
2
8

score -1 · Answer 2 · answered Apr 24 '20 at 09:49

Try this

<div class="dropdown inputdropdown">
                  <input class="searchformss dropdown-toggle" type="text" data-toggle="dropdown" placeholder="test" />
                  <div class="dropdown-menu">
                    <a class="dropdown-item">test</a>
                    <a class="dropdown-item">Another action</a>
                    <a class="dropdown-item">Something else here</a>
                  </div>
                </div>

Focus input field in Bootstrap dropdown menu

2 Answers2