CODEWITHSUNDEEP
javascriptangularjs
Kousha
Kousha

Reputation: 36219

AngularJS - Blur delay

I have the following:

<div class="staff">

    <input ng-model="user" 
            ng-focus="isFocused = true;"
            ng-blur="isFocused = false;/>

    <div class="matches" ng-if="isFocused">
        <div class="user" 
            ng-repeat="match in users | filter:user" 
            ng-bind="match"
            ng-click="user = match">
        </div>
    </div>

</div>

With my directive on .staff. Basically, we have an input field. When you start typing, it shows the matches. I want to then click a match and that should update ng-model='user'.

Right now this doesn't work, because ng-focus quickly hides the .matches (that is, when you want to click on a .match, then you have blurred out of the input, so isFocused becomes false).

My solution currently is to rely on the directive element.bind() for the focus and blur, and basically delay the action.

So, in my current implementation, the input tag is simply <input ng-model="user"/> and my directive's link is

link: function(scope, element, attrs)
{
    element.bind('focus', function()
    {
        scope.isFocused = true;
    });

    element.bind('blur', function()
    {
        $timeout(function() 
        {
            scope.isFocused = false;
        }, 125);
    });
}

I really prefer the first option. Is there anything I can do?

Upvotes: 1

Views: 2575

Answers (1)

gorpacrate
gorpacrate

Reputation: 5571

<div class="staff">
    <input ng-model="user" 
            ng-focus="isFocused = true;"
            ng-blur="focusOut()"/>

    <div class="matches" ng-if="isFocused">
        <div class="user" 
            ng-repeat="match in users | filter:user" 
            ng-bind="match"
            ng-click="user = match">
        </div>
    </div>
</div> 

link: function(scope, element, attrs){
    scope.focusOut = function(){
        $timeout(function(){
            scope.isFocused = false;
        }, 125);
    });
}

Upvotes: 1

Related Questions