ng-focus firing twice and ng-blur never fires

Question

I am fairly experience with Angular by now, but this appears to be something happening at a lower level with the way DOM events are propagated. For some reason in just part of my application I have ng-focus and ng-blur on the same input , but the ng-focus event fires twice and the ng-blur never fires.

<input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />

Then in my controller

$scope.doFocus = function(){
    console.log('focus');
}

$scope.doBlur = function(){
    console.log('blur');
 }

When I inspect my console, I see 2 "focus" and no "blur" messages... I have tested this in other parts of my website and it works in some others. My guess is it has something to do with the DOM, but I have even tried pulling out basically everything on the page except the input and it still didn't work correctly. Does anyone have any idea what could cause this?

UPDATE

After some more debugging, I noticed that the focus event is fired once in the scope of the browser, but the event triggers twice in the world of AngularJS. I set a breakpoint on all Focus events using Chrome Dev Tools and it only would hit once, but if I log the Angular $event in the console, I can see the EXACT same $event with the same timestamp being triggered twice in Angular.

Answer 1

Ok.. so this is kind of a strange one. After not finding a solution myself, I had a coworker try to reproduce my problem on his machine. Of course, it worked just fine for him.. this made me think it was my Chrome, so I uninstalled and re-installed a fresh instance of Chrome and now it everything is just fine... not sure what happened to my Chrome that caused the DOM events to get all kinds of messed up, but at least I figured it out.

Hopefully this helps anyone that may have this problem in the future.

UPDATE

I realized the problem was the Chrome Extension: AngularJS Batarang

This plugin was messing with my DOM events and caused them to not fire correctly. I removed the extension from Chrome and everything started working!

Answer 2

This was driving me nuts until I discovered that it is a known bug with angular-batarang. See: https://github.com/angular/angularjs-batarang/issues/211 . (Please star the issue if it is still not fixed when you read this.)

With batarang installed and enabled, only the first declared ng-blur or ng-focus will fire.

Eg if you have,

    <input ng-blur='onBlur()' ng-focus='onFocus()'>

you will get the blur event but not the focus event. If you have,

    <input ng-focus='onFocus()' ng-blur='onBlur()'>

you will get the focus event but not the blur event.

If you are hitting this problem, until it is fixed the workaround is just to disable batarang when you are working with these events using the "Enable" checkbox shown here:

Answer 3

Just in case you're like me and don't read the docs ...

You can't just apply on-blur/on-focus to any element. There are limited form elements as well as the window object that support it. Doesn't work on lots of other tag types... one more reason either of these 2 events might not fire...

Answer 4

You must have something else wrong in your code.

When trying this:

<div ng-app="app" ng-controller="appCtrl">
    <input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />
</div>

angular.module('app',[]).
controller('appCtrl', function($scope){
    $scope.doFocus = function(){
        console.log('focus');
    }

    $scope.doBlur = function(){
        console.log('blur');
    }
});

It works just fine. Check it out here .

Answer 5

This can also happen with other extensions installed. In my case ng-blur was firing twice when I clicked on a radio button. One click, two blur events - no matter if the radio had already been selected.

After some testing, I discovered that AdBlock was the problem. This is slightly problematic; I cannot assume my users won't have it. I have to assume the radio buttons will always blur twice.

I will keep looking for another workaround.