fix(ngEventDirs): execute blur and focus expression using `scope.…

…$evalAsync`

BREAKING CHANGE:
The `blur` and `focus` event fire synchronously, also during DOM operations
that add/remove elements. This lead to errors as the Angular model was not
in a consistent state.

This change executes the expression of those events now asynchronously.

Related to #5945
Fixes #4979

src/ng/directive/ngEventDirs.js

@@ -37,6 +37,14 @@
  * Events that are handled via these handler are always configured not to propagate further.
  */
 var ngEventDirectives = {};
+
+// For events that might fire synchronously during DOM manipulation
+// we need to execute their event handlers asynchronously using $evalAsync,
+// so that they are not executed in an inconsistent state.
+var forceAsyncEvents = {
+  'blur': true,
+  'focus': true
+};
 forEach(
   'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
   function(name) {
@@ -47,10 +55,16 @@ forEach(
         compile: function($element, attr) {
           var fn = $parse(attr[directiveName]);
           return function ngEventHandler(scope, element) {
-            element.on(lowercase(name), function(event) {
-              scope.$apply(function() {
+            var eventName = lowercase(name);
+            element.on(eventName, function(event) {
+              var callback = function() {
                 fn(scope, {$event:event});
-              });
+              };
+              if (forceAsyncEvents[eventName]) {
+                scope.$evalAsync(callback)
+              } else {
+                scope.$apply(callback);
+              }
             });
           };
         }
@@ -367,6 +381,11 @@ forEach(
  * @description
  * Specify custom behavior on focus event.
  *
+ * Note: As the `blur` event is executed synchronously also during DOM manipulations
+ * (e.g. adding an input with the html `autofocus` attribute),
+ * AngularJS executes the expression asynchronously (using `scope.$evalAsync`) to ensure
+ * a consistent model.
+ *
  * @element window, input, select, textarea, a
  * @priority 0
  * @param {expression} ngFocus {@link guide/expression Expression} to evaluate upon
@@ -383,6 +402,11 @@ forEach(
  * @description
  * Specify custom behavior on blur event.
  *
+ * Note: As the `blur` event is executed synchronously also during DOM manipulations
+ * (e.g. removing a focussed input),
+ * AngularJS executes the expression asynchronously (using `scope.$evalAsync`) to ensure
+ * a consistent model.
+ *
  * @element window, input, select, textarea, a
  * @priority 0
  * @param {expression} ngBlur {@link guide/expression Expression} to evaluate upon

test/ng/directive/ngEventDirsSpec.js

@@ -39,4 +39,34 @@ describe('event directives', function() {
       expect($rootScope.formSubmitted).toEqual('foo');
     }));
   });
+
+  describe('sync events that might be triggered by DOM changes', function() {
+
+    it('should call the blur and focus listener asynchronously', inject(function($rootScope, $compile) {
+      element = $compile('<input type="text" ng-focus="focus()" ng-blur="blur()">')($rootScope);
+      $rootScope.blur = jasmine.createSpy('blur');
+      $rootScope.focus = jasmine.createSpy('focus');
+      // need to add to document so that blur/focus fires
+      document.body.appendChild(element[0]);
+
+      element[0].focus();
+
+      expect($rootScope.blur).not.toHaveBeenCalled();
+      expect($rootScope.focus).not.toHaveBeenCalled();
+
+      $rootScope.$apply();
+
+      expect($rootScope.blur).not.toHaveBeenCalled();
+      expect($rootScope.focus).toHaveBeenCalledOnce();
+
+      element[0].blur();
+
+      $rootScope.$apply();
+
+      expect($rootScope.blur).toHaveBeenCalledOnce();
+      expect($rootScope.focus).toHaveBeenCalledOnce();
+
+    }));
+
+  });
 });

test/ng/directive/ngKeySpec.js

@@ -34,23 +34,5 @@ describe('ngKeyup and ngKeydown directives', function() {
     expect($rootScope.touched).toEqual(true);
   }));
 
-  it('should get called on focus', inject(function($rootScope, $compile) {
-    element = $compile('<input ng-focus="touched = true">')($rootScope);
-    $rootScope.$digest();
-    expect($rootScope.touched).toBeFalsy();
-
-    browserTrigger(element, 'focus');
-    expect($rootScope.touched).toEqual(true);
-  }));
-
-  it('should get called on blur', inject(function($rootScope, $compile) {
-    element = $compile('<input ng-blur="touched = true">')($rootScope);
-    $rootScope.$digest();
-    expect($rootScope.touched).toBeFalsy();
-
-    browserTrigger(element, 'blur');
-    expect($rootScope.touched).toEqual(true);
-  }));
-
 });