Menu
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.
306
The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does bubble. The opposite of blur is the focus event, which fires when the element has received focus. The blur event is not cancelable.
Methods focus/blurblur() set/unset the focus on the element. It works in all browsers except Firefox (bug). If we enter something into the input and then try to use Tab or click away from the <input> , then onblur returns the focus back. Please note that we can't “prevent losing focus” by calling event.
The ng-blur directive tells AngularJS what to do when an HTML element loses focus. The ng-blur directive from AngularJS will not override the element's original onblur event, both the ng-blur expression and the original onblur event will be executed.
blur() method removes keyboard focus from the current element.
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!
55
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...
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
