Stop click event on input field within dropdown menu (AngularJS filter element)

Question

I've got a Dropdown Menu with an input field to search my li elements. The problem is: Whenever I click into the input field to put in my search query, a click event happens and the dropdown menu disappears.

I tried preventDefault on the input field, but it didn't work. How can I stop the behaviour?

Here's a Plunker: http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

Here's my markup (It's the input with the ng-model="customerFilter"):

<div class="button">
  <a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#">
    Organisation
  </a>
  <ul class="dropdown-menu grey" >
    <input type="text" ng-model="customerFilter">
    <li ng-repeat="customer in customers | filter:customerFilter | orderBy:sortorder" ng-click="addCardGrey(customer)">{{ customer.name }}</li>
  </ul>
</div>

Thank you very much in advance!

Answer 1

preventDefault stops the default action the browser makes on that event.

What you want to use is stopPropagation, which stops the event from bubbling up the event chain.

You can for example use it in a directive like this:

Code:

.directive('myInput', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('click', function (event) {
                event.stopPropagation();
            });
        }
    };
});

Markup:

<input type="text" ng-model="customerFilter" my-input>