fix(modal): Fix focus when the dialog is close or cancelled

src/modal/modal.js

@@ -234,6 +234,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
 
       $modalStack.open = function (modalInstance, modal) {
 
+        var modalOpener = $document[0].activeElement;
+
         openedWindows.add(modalInstance, {
           deferred: modal.deferred,
           modalScope: modal.scope,
@@ -264,6 +266,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
 
         var modalDomEl = $compile(angularDomEl)(modal.scope);
         openedWindows.top().value.modalDomEl = modalDomEl;
+        openedWindows.top().value.modalOpener = modalOpener;
         body.append(modalDomEl);
         body.addClass(OPENED_MODAL_CLASS);
       };
@@ -273,6 +276,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
         if (modalWindow) {
           modalWindow.value.deferred.resolve(result);
           removeModalWindow(modalInstance);
+          modalWindow.value.modalOpener.focus();
         }
       };
 
@@ -281,6 +285,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
         if (modalWindow) {
           modalWindow.value.deferred.reject(reason);
           removeModalWindow(modalInstance);
+          modalWindow.value.modalOpener.focus();
         }
       };
 

src/modal/test/modal.spec.js

@@ -207,6 +207,28 @@ describe('$modal', function () {
       expect($document).toHaveModalsOpen(0);
     });
 
+    it('should return to the element which had focus before the dialog is invoked', function () {
+      var link = '<a href>Link</a>';
+      var element = angular.element(link);
+      angular.element(document.body).append(element);
+      element.focus();
+      expect(document.activeElement.tagName).toBe('A');
+
+      var modal = open({template: '<div>Content<button>inside modal</button></div>'});
+      $timeout.flush();
+      expect(document.activeElement.tagName).toBe('DIV');
+      expect($document).toHaveModalsOpen(1);
+
+      triggerKeyDown($document, 27);
+      $timeout.flush();
+      $rootScope.$digest();
+
+      expect(document.activeElement.tagName).toBe('A');
+      expect($document).toHaveModalsOpen(0);
+
+      element.remove();
+    });
+
     it('should resolve returned promise on close', function () {
       var modal = open({template: '<div>Content</div>'});
       close(modal, 'closed ok');
@@ -606,5 +628,34 @@ describe('$modal', function () {
       dismiss(modal2);
       expect(body).not.toHaveClass('modal-open');
     });
+
+    it('should return to the element which had focus before the dialog is invoked', function () {
+      var link = '<a href>Link</a>';
+      var element = angular.element(link);
+      angular.element(document.body).append(element);
+      element.focus();
+      expect(document.activeElement.tagName).toBe('A');
+
+      var modal1 = open({template: '<div>Modal1<button id="focus">inside modal1</button></div>'});
+      $timeout.flush();
+      document.getElementById('focus').focus();
+      expect(document.activeElement.tagName).toBe('BUTTON');
+      expect($document).toHaveModalsOpen(1);
+
+      var modal2 = open({template: '<div>Modal2</div>'});
+      $timeout.flush();
+      expect(document.activeElement.tagName).toBe('DIV');
+      expect($document).toHaveModalsOpen(2);
+
+      dismiss(modal2);
+      expect(document.activeElement.tagName).toBe('BUTTON');
+      expect($document).toHaveModalsOpen(1);
+
+      dismiss(modal1);
+      expect(document.activeElement.tagName).toBe('A');
+      expect($document).toHaveModalsOpen(0);
+
+      element.remove();
+    });
   });
 });