fix(pagination): remove focus from prior clicked elements

Closes angular-ui#3488 Fixes angular-ui#3486
chrisirhc · Apr 5, 2015 · 33269bb · 33269bb
1 parent e6b105a
commit 33269bb
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 12 deletions.
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
@@ -46,8 +46,11 @@ angular.module('ui.bootstrap.pagination', [])
     $scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
   };
 
-  $scope.selectPage = function(page) {
+  $scope.selectPage = function(page, evt) {
     if ( $scope.page !== page && page > 0 && page <= $scope.totalPages) {
+      if (evt && evt.target) {
+        evt.target.blur();
+      }
       ngModelCtrl.$setViewValue(page);
       ngModelCtrl.$render();
     }

diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
@@ -1,12 +1,13 @@
 describe('pager directive', function () {
-  var $compile, $rootScope, element;
+  var $compile, $rootScope, $document, element;
   beforeEach(module('ui.bootstrap.pagination'));
   beforeEach(module('template/pagination/pager.html'));
-  beforeEach(inject(function(_$compile_, _$rootScope_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
+    $document = _$document_;
     element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
     $rootScope.$digest();
   }));
@@ -22,6 +23,10 @@ describe('pager directive', function () {
   function clickPaginationEl(index) {
     getPaginationEl(index).find('a').click();
   }
+
+  function getPaginationLinkEl(elem, index) {
+    return elem.find('li').eq(index).find('a');
+  }
 
   function updateCurrentPage(value) {
     $rootScope.currentPage = value;
@@ -96,6 +101,32 @@ describe('pager directive', function () {
     expect(getPaginationEl(-1).text()).toBe('Next »');
   });
 
+  it('should blur the "next" link after it has been clicked', function () {
+    $document.find('body').append(element);
+    var linkEl = getPaginationLinkEl(element, -1);
+
+    linkEl.focus();
+    expect(linkEl).toHaveFocus();
+
+    linkEl.click();
+    expect(linkEl).not.toHaveFocus();
+
+    element.remove();
+  });
+
+  it('should blur the "prev" link after it has been clicked', function () {
+    $document.find('body').append(element);
+    var linkEl = getPaginationLinkEl(element, -1);
+
+    linkEl.focus();
+    expect(linkEl).toHaveFocus();
+
+    linkEl.click();
+    expect(linkEl).not.toHaveFocus();
+
+    element.remove();
+  });
+
   describe('`items-per-page`', function () {
     beforeEach(function() {
       $rootScope.perpage = 5;

diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js
@@ -1,12 +1,13 @@
 describe('pagination directive', function () {
-  var $compile, $rootScope, element;
+  var $compile, $rootScope, $document, element;
   beforeEach(module('ui.bootstrap.pagination'));
   beforeEach(module('template/pagination/pagination.html'));
-  beforeEach(inject(function(_$compile_, _$rootScope_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
+    $document = _$document_;
     element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
     $rootScope.$digest();
   }));
@@ -22,6 +23,10 @@ describe('pagination directive', function () {
   function clickPaginationEl(index) {
     getPaginationEl(index).find('a').click();
   }
+
+  function getPaginationLinkEl(elem, index) {
+    return elem.find('li').eq(index).find('a');
+  }
 
   function updateCurrentPage(value) {
     $rootScope.currentPage = value;
@@ -122,6 +127,45 @@ describe('pagination directive', function () {
     expect($rootScope.currentPage).toBe(1);
   });
 
+  it('should blur a page link after it has been clicked', function () {
+    $document.find('body').append(element);
+    var linkEl = getPaginationLinkEl(element, 2);
+
+    linkEl.focus();
+    expect(linkEl).toHaveFocus();
+
+    linkEl.click();
+    expect(linkEl).not.toHaveFocus();
+
+    element.remove();
+  });
+
+  it('should blur the "next" link after it has been clicked', function () {
+    $document.find('body').append(element);
+    var linkEl = getPaginationLinkEl(element, -1);
+
+    linkEl.focus();
+    expect(linkEl).toHaveFocus();
+
+    linkEl.click();
+    expect(linkEl).not.toHaveFocus();
+
+    element.remove();
+  });
+
+  it('should blur the "prev" link after it has been clicked', function () {
+    $document.find('body').append(element);
+    var linkEl = getPaginationLinkEl(element, 0);
+
+    linkEl.focus();
+    expect(linkEl).toHaveFocus();
+
+    linkEl.click();
+    expect(linkEl).not.toHaveFocus();
+
+    element.remove();
+  });
+
   describe('`items-per-page`', function () {
     beforeEach(function() {
       $rootScope.perpage = 5;
@@ -259,6 +303,19 @@ describe('pagination directive', function () {
       expect(getPaginationEl(0).text()).toBe('Previous');
       expect(getPaginationEl(-1).text()).toBe('Next');
     });
+
+    it('should blur page link when visible range changes', function () {
+      $document.find('body').append(element);
+      var linkEl = getPaginationLinkEl(element, 4);
+
+      linkEl.focus();
+      expect(linkEl).toHaveFocus();
+
+      linkEl.click();
+      expect(linkEl).not.toHaveFocus();
+
+      element.remove();
+    });
   });
 
   describe('with `max-size` option & no `rotate`', function () {
@@ -415,6 +472,32 @@ describe('pagination directive', function () {
       expect(getPaginationEl(1).text()).toBe('<<');
       expect(getPaginationEl(-2).text()).toBe('>>');
     });
+
+    it('should blur the "first" link after it has been clicked', function () {
+      $document.find('body').append(element);
+      var linkEl = getPaginationLinkEl(element, 0);
+
+      linkEl.focus();
+      expect(linkEl).toHaveFocus();
+
+      linkEl.click();
+      expect(linkEl).not.toHaveFocus();
+
+      element.remove();
+    });
+
+    it('should blur the "last" link after it has been clicked', function () {
+      $document.find('body').append(element);
+      var linkEl = getPaginationLinkEl(element, -1);
+
+      linkEl.focus();
+      expect(linkEl).toHaveFocus();
+
+      linkEl.click();
+      expect(linkEl).not.toHaveFocus();
+
+      element.remove();
+    });
   });
 
   describe('pagination directive with just number links', function () {

diff --git a/template/pagination/pager.html b/template/pagination/pager.html
@@ -1,4 +1,4 @@
 <ul class="pager">
-  <li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
-  <li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
+  <li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
+  <li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
 </ul>
diff --git a/template/pagination/pagination.html b/template/pagination/pagination.html
@@ -1,7 +1,7 @@
 <ul class="pagination">
-  <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)">{{getText('first')}}</a></li>
-  <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
-  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
-  <li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
-  <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages)">{{getText('last')}}</a></li>
+  <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
+  <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
+  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number, $event)">{{page.text}}</a></li>
+  <li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
+  <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
 </ul>