IE Window loses focus on start of Angular app with any XMLHttpRequest

Question

I am seeing some bizarre behavior with IE 10 and 11 where, upon loading an AngularJS app, the window loses focus. It only happens when an XMLHttpRequest request is made while the page is initially loading. Any application interaction, with or without ajax, after that is normal. I've tried using $resource to make the request as well as $http. Both have the same result. My app's resource module is defined as:

/**
 * Resource module
 */
angular.module('appname.resources.sampleData', ['ngResource'])
  .service('sampleDataResource', ['$resource', 'restUrl', SampleRestResource])
  .constant('restUrl', '/url/path/to/rest/data/:id');

/**
 * Resource definition
 */
function SampleRestResource ($resource, restUrl) {
  this.resource = $resource(restUrl);
}

/**
 * Resource query function
 */
SampleRestResource.prototype.query = function () {
  return this.resource.query().$promise;
};

The page controller that uses the rest resource is defined as:

/**
 * Page module definition
 */
 angular.module('appname.pages.defaultpage', [])
   .constant('strTitle', 'Page Title')
   .controller('defaultPageController', ['$scope', 'strTitle', 'sampleDataResource', DefaultPageController]);

/**
 * Page controller definition
 */
function DefaultPageController($scope, strTitle, sampleDataResource) {

    $scope.pageTitle = strTitle;

    sampleDataResource.query().then(function(data) {
        $scope.sampleDataFromResource = data;
    });

}

If I swap out the ajax request in the controller with a JQuery equivalent the window does not lose focus. The controller then becomes:

/**
 * Page controller definition
 */
function DefaultPageController($scope, strTitle, sampleDataResource) {

  $scope.pageTitle = strTitle;

  $.get("/url/path/to/rest/data").done(
      function(data){
          $scope.sampleDataFromResource = data;
      }
  );

}

As I mentioned in my introduction to this issue, I see the same results when making requests of HTML templates within $routeProvider configuration or directive definitions using 'templateUrl'. However, I started using the grunt-html2js and feel pretty good about that as a solution.

I have nothing against using JQuery but would rather keep my code consistent and more testable by using the Angular framework in this situation. If anyone can correct my approach or has any ideas, I would greatly appreciate it.

Answer 1

The issue is being caused by the angular-block-ui plugin. We are/were using it for all our "please wait" messaging for ajax requests. Once I removed the plugin from my app the issue no longer occurred. For anyone else interested, the plugin version I am using is 0.2.0. Just by loading the plugin with its default behavior (and making an ajax request when the app is loading) should replicate the issue.