Angular ng-blur is being triggered on focus

Question

I have a textarea that when one types the hash symbol "#" the focus switches to an input. The issue I am having is that when the cursor switches to the input element it is triggering the ng-blur function.

angular.element('#inputElement').focus(); is triggering a blur event.

Why is it triggering ng-blur? That makes no sense to me.

See the demo:

http://plnkr.co/edit/D3dOj90I3uQlz0OGaNjV?p=preview

Looks like a bug, at least ya, not expected behaviour. Using a timeout fixes it: `setTimeout(function(){angular.element('#inputElement').focus();},0);` http://plnkr.co/edit/b6iDvLrM1eI4jAM1Gr6x?p=preview — A. Wolff, Oct 21 '14 at 16:50
@A.Wolff Brilliant fix, how did you think of using a Timeout? — Jakobovski, Oct 21 '14 at 16:54
For what it's worth I can only reproduce this in Chrome. Both IE and Firefox seem to work as expected. — Stryner, Oct 21 '14 at 16:55
Seems related to `keypress event` on chrome, cannot be reproduced using `keyup event` — A. Wolff, Oct 21 '14 at 17:09

score 1 · Accepted Answer · answered Oct 21 '14 at 17:11

1

Sounds like a bug. The best thing you can do is set up an event that will do nothing, perhaps e.preventDefault() during blur.

Have you tried using a directive and instead of grabbing the element through angular.element("#inputElement") you use the built-in element?

answered Oct 21 '14 at 17:11

karissa

94
2

preventDefault() fixed it for me. Thanks! – Jesús Carrera Jun 17 '15 at 09:20

score 0 · Answer 2 · edited May 23 '17 at 11:52

See the answer for this other question: ng-focus firing twice and ng-blur never fires

In short... try turning all extensions off in Chrome, and see if that makes the problem go away. The original question writer for the link above had problems because of the Angular Batarang. I personally am having problems with AdBlock... both extensions seem to be interfering with the DOM events in some manner.

Angular ng-blur is being triggered on focus

2 Answers2