I have a button that uses the angular -ui-bootstrap dropdown and input text. When the page loads, I can freely enter text in the input field. However, after pressing the button, I can no longer focus on the input field: the focus continuously returns to the drop-down button.
How to fix this problem, or did I get a bug (and I have to address the problem)?
Here is a simple example using code directly from angular -ui-bootstrap:
https://plnkr.co/edit/JbXo3WfLgrHoXcyC2If4?p=preview
<div ng-controller="DropdownCtrl">
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text">
</div>
FWIW, this seems to be a violation of the calling function: https://github.com/angular-ui/bootstrap/blob/7a1d54c8c34265e0e1b7ac1b38f58b5867a2af49/src/dropdown/dropdown.js#L108