Bootstrap input field in dropdown with AngularJS

Question

I have a dropdown menu using Bootstrap and inside it, there is an input field. Everytime I click the input field, the dropdown menu disappears. How would I stop that?

By the way, I'm using AngularJS, so jQuery way probably won't fit in here.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="pull-left">{{ trans('text.choose_user') }}</span> 
        <span class="pull-right"><i class="icon-order-table"></i></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation" class="basic-padding"><a role="menuitem" tabindex="-1" href="#">{{ trans('text.guest') }}</a></li>
        <li class="basic-padding">
            <div class="input-group">
                <input type="search" class="form-control" placeholder="{{ trans('text.search') }}">
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        <i class="icon-search"></i>
                    </button>
                </span>
            </div>
        </li>
    </ul>
</div>

Try adding ng-click="$event.preventDefault()" to the input element. — Rob J
– Rob J, Commented Oct 19, 2014 at 13:10

dulan · Accepted Answer · 2014-10-19 13:42:42Z

12

Thanks to @Rob J, I've come up with a solution, not exactly as what he mentioned though:

<input type="search" class="form-control" placeholder="{{ trans('text.search') }}" ng-click="$event.stopPropagation()">

answered Oct 19, 2014 at 13:42

dulan

1,6046 gold badges25 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

the_joric Over a year ago

mark this as answer - it works and may be helpful for others (like me :) )

Joan-Diego Rodriguez Over a year ago

Works like a charm with ui-bootstrap as well. Thanks

Srinivas Paila · Accepted Answer · 2014-10-19 13:41:26Z

2

You should try using angular ui-select. Here's link to github

Link to plunker demo

Go through the documentation and there are several options to configure ui-select.

Sample code to configure ui-select

<ui-select ng-model="person.selected" theme="bootstrap" style="min-width: 300px;">
  <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

answered Oct 19, 2014 at 13:41

Srinivas Paila

8176 silver badges10 bronze badges

Collectives™ on Stack Overflow

Bootstrap input field in dropdown with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related