$digest error when using ng-blur in an ng-if

[matthughes]

I have two input fields both set to autofocus. Each input field is inside an ng-if condition that is mutually exclusive. The condition starts out false showing the one input field, and when an http call finishes, the condition is set to true, removing one DOM and showing the other. When the initial one gets hid, it triggers the ng-blur event, but I get this exception:

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.0/$rootScope/inprog?p0=%24digest
    at https://192.168.20.248:8011/ui/dependencies/angular/angular.js:78:12
    at beginPhase (https://192.168.20.248:8011/ui/dependencies/angular/angular.js:11830:15)
    at Scope.$apply (https://192.168.20.248:8011/ui/dependencies/angular/angular.js:11627:11)
    at HTMLInputElement.<anonymous> (https://192.168.20.248:8011/ui/dependencies/angular/angular.js:17425:21)
    at HTMLInputElement.jQuery.event.dispatch (https://192.168.20.248:8011/ui/dependencies/jquery/jquery.js:5095:9)
    at HTMLInputElement.elemData.handle (https://192.168.20.248:8011/ui/dependencies/jquery/jquery.js:4766:28)
    at https://192.168.20.248:8011/ui/dependencies/angular-animate/angular-animate.js:875:54
    at forEach (https://192.168.20.248:8011/ui/dependencies/angular/angular.js:303:18)
    at getElementAnimationDetails (https://192.168.20.248:8011/ui/dependencies/angular-animate/angular-animate.js:871:11)
    at animateSetup (https://192.168.20.248:8011/ui/dependencies/angular-animate/angular-animate.js:957:23) 

HTML

        <div ng-controller="MyCtrl">
          <div ng-if="result">
            <form>
              <input type="text" required autofocus class="form-control" ng-blur="focusStolen()" />
              Result is back
            </form>
          </div>
          <div ng-if="!result">
            <form>
              <input type="text" required autofocus class="form-control" />
              Awaiting result
            </form
          </div>
        </div>

Script

var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {

  function refresh() {
     $http.get('index.html').then(function() {
       $scope.result = true;
     });
  }

  refresh();
}]);

[petebacondarwin]

A plunker demonstrating this (perhaps with $timeout if you don't want to get into using $http in the demo) would be useful.

[caitp]

As mentioned in #6364, the focus event may need to $evalAsync rather than $apply, in order to prevent issues with html5 autofocus (and possibly other situations)

[Narretz]

related #5945

I tried the example in the above issue with $evalAsync and it works. Might have to try with other issues. Pull request wanted?

[Narretz]

I can't reproduce this in a plunkr:
http://plnkr.co/edit/YSTK5qQcltDL1jtsmqIj?p=preview (best open in Chrome, FF does not autofocus correctly for me)

Neither httpBackend mocks nor timeout show the problem. Note also that the description does not match the example code: the blur should be on the element that is initially displayed.

[nbrustein]

The same problem exists in ngModelDirective's post method. Doesn't look like it's fixed by PR 6910

[tbosch]

Ok, I will create a PR too that always uses scope.$evalAsync. Reasoning:

blur and focus events are fired in sync, i.e. if a focused input event is removed it triggers the blur event and calls our listener at an unexpected time. See this fiddle: http://jsfiddle.net/n2Lb8y2q/

Even if we are outside of angular and someone causes a blur/focus on an angular element with an angular event listener we should wait as the caller might also be in an unsafe code position where executing our listener would lead to unforeseen side effects.