Unable to focus on typing after using angular -ui-bootstrap.

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">
    <!-- Single button -->
    <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

+4

Source: https://habr.com/ru/post/1663800/


All Articles