current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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!

share|improve this question
    
You probably want to take a look at the angularui project, believe it'll be easier than trying to wrap up the bootstrap code yourself. –  shaunhusain Oct 20 '13 at 0:01

1 Answer 1

up vote 7 down vote accepted

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>
share|improve this answer
    
Awesome! Exactly, what I needed, tasseKATT! :) Thank you so much! –  christophe Oct 20 '13 at 21:04
    
This answer doesn't have enough votes in it. –  MoshMage Sep 22 '14 at 16:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.