Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 33269bb

Browse files
benthepoetwesleycho
benthepoet
authored and
wesleycho
committed
fix(pagination): remove focus from prior clicked elements
Closes #3488 Fixes #3486
1 parent e6b105a commit 33269bb

File tree

5 files changed

+129
-12
lines changed

5 files changed

+129
-12
lines changed

‎src/pagination/pagination.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,11 @@ angular.module('ui.bootstrap.pagination', [])
4646
$scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
4747
};
4848

49-
$scope.selectPage = function(page) {
49+
$scope.selectPage = function(page, evt) {
5050
if ( $scope.page !== page && page > 0 && page <= $scope.totalPages) {
51+
if (evt && evt.target) {
52+
evt.target.blur();
53+
}
5154
ngModelCtrl.$setViewValue(page);
5255
ngModelCtrl.$render();
5356
}

‎src/pagination/test/pager.spec.js‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
describe('pager directive', function () {
2-
var $compile, $rootScope, element;
2+
var $compile, $rootScope, $document, element;
33
beforeEach(module('ui.bootstrap.pagination'));
44
beforeEach(module('template/pagination/pager.html'));
5-
beforeEach(inject(function(_$compile_, _$rootScope_) {
5+
beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
66
$compile = _$compile_;
77
$rootScope = _$rootScope_;
88
$rootScope.total = 47; // 5 pages
99
$rootScope.currentPage = 3;
10+
$document = _$document_;
1011
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
1112
$rootScope.$digest();
1213
}));
@@ -22,6 +23,10 @@ describe('pager directive', function () {
2223
function clickPaginationEl(index) {
2324
getPaginationEl(index).find('a').click();
2425
}
26+
27+
function getPaginationLinkEl(elem, index) {
28+
return elem.find('li').eq(index).find('a');
29+
}
2530

2631
function updateCurrentPage(value) {
2732
$rootScope.currentPage = value;
@@ -96,6 +101,32 @@ describe('pager directive', function () {
96101
expect(getPaginationEl(-1).text()).toBe('Next »');
97102
});
98103

104+
it('should blur the "next" link after it has been clicked', function () {
105+
$document.find('body').append(element);
106+
var linkEl = getPaginationLinkEl(element, -1);
107+
108+
linkEl.focus();
109+
expect(linkEl).toHaveFocus();
110+
111+
linkEl.click();
112+
expect(linkEl).not.toHaveFocus();
113+
114+
element.remove();
115+
});
116+
117+
it('should blur the "prev" link after it has been clicked', function () {
118+
$document.find('body').append(element);
119+
var linkEl = getPaginationLinkEl(element, -1);
120+
121+
linkEl.focus();
122+
expect(linkEl).toHaveFocus();
123+
124+
linkEl.click();
125+
expect(linkEl).not.toHaveFocus();
126+
127+
element.remove();
128+
});
129+
99130
describe('`items-per-page`', function () {
100131
beforeEach(function() {
101132
$rootScope.perpage = 5;

‎src/pagination/test/pagination.spec.js‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
describe('pagination directive', function () {
2-
var $compile, $rootScope, element;
2+
var $compile, $rootScope, $document, element;
33
beforeEach(module('ui.bootstrap.pagination'));
44
beforeEach(module('template/pagination/pagination.html'));
5-
beforeEach(inject(function(_$compile_, _$rootScope_) {
5+
beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
66
$compile = _$compile_;
77
$rootScope = _$rootScope_;
88
$rootScope.total = 47; // 5 pages
99
$rootScope.currentPage = 3;
10+
$document = _$document_;
1011
element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
1112
$rootScope.$digest();
1213
}));
@@ -22,6 +23,10 @@ describe('pagination directive', function () {
2223
function clickPaginationEl(index) {
2324
getPaginationEl(index).find('a').click();
2425
}
26+
27+
function getPaginationLinkEl(elem, index) {
28+
return elem.find('li').eq(index).find('a');
29+
}
2530

2631
function updateCurrentPage(value) {
2732
$rootScope.currentPage = value;
@@ -122,6 +127,45 @@ describe('pagination directive', function () {
122127
expect($rootScope.currentPage).toBe(1);
123128
});
124129

130+
it('should blur a page link after it has been clicked', function () {
131+
$document.find('body').append(element);
132+
var linkEl = getPaginationLinkEl(element, 2);
133+
134+
linkEl.focus();
135+
expect(linkEl).toHaveFocus();
136+
137+
linkEl.click();
138+
expect(linkEl).not.toHaveFocus();
139+
140+
element.remove();
141+
});
142+
143+
it('should blur the "next" link after it has been clicked', function () {
144+
$document.find('body').append(element);
145+
var linkEl = getPaginationLinkEl(element, -1);
146+
147+
linkEl.focus();
148+
expect(linkEl).toHaveFocus();
149+
150+
linkEl.click();
151+
expect(linkEl).not.toHaveFocus();
152+
153+
element.remove();
154+
});
155+
156+
it('should blur the "prev" link after it has been clicked', function () {
157+
$document.find('body').append(element);
158+
var linkEl = getPaginationLinkEl(element, 0);
159+
160+
linkEl.focus();
161+
expect(linkEl).toHaveFocus();
162+
163+
linkEl.click();
164+
expect(linkEl).not.toHaveFocus();
165+
166+
element.remove();
167+
});
168+
125169
describe('`items-per-page`', function () {
126170
beforeEach(function() {
127171
$rootScope.perpage = 5;
@@ -259,6 +303,19 @@ describe('pagination directive', function () {
259303
expect(getPaginationEl(0).text()).toBe('Previous');
260304
expect(getPaginationEl(-1).text()).toBe('Next');
261305
});
306+
307+
it('should blur page link when visible range changes', function () {
308+
$document.find('body').append(element);
309+
var linkEl = getPaginationLinkEl(element, 4);
310+
311+
linkEl.focus();
312+
expect(linkEl).toHaveFocus();
313+
314+
linkEl.click();
315+
expect(linkEl).not.toHaveFocus();
316+
317+
element.remove();
318+
});
262319
});
263320

264321
describe('with `max-size` option & no `rotate`', function () {
@@ -415,6 +472,32 @@ describe('pagination directive', function () {
415472
expect(getPaginationEl(1).text()).toBe('<<');
416473
expect(getPaginationEl(-2).text()).toBe('>>');
417474
});
475+
476+
it('should blur the "first" link after it has been clicked', function () {
477+
$document.find('body').append(element);
478+
var linkEl = getPaginationLinkEl(element, 0);
479+
480+
linkEl.focus();
481+
expect(linkEl).toHaveFocus();
482+
483+
linkEl.click();
484+
expect(linkEl).not.toHaveFocus();
485+
486+
element.remove();
487+
});
488+
489+
it('should blur the "last" link after it has been clicked', function () {
490+
$document.find('body').append(element);
491+
var linkEl = getPaginationLinkEl(element, -1);
492+
493+
linkEl.focus();
494+
expect(linkEl).toHaveFocus();
495+
496+
linkEl.click();
497+
expect(linkEl).not.toHaveFocus();
498+
499+
element.remove();
500+
});
418501
});
419502

420503
describe('pagination directive with just number links', function () {

‎template/pagination/pager.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<ul class="pager">
2-
<li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
3-
<li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
2+
<li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
3+
<li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
44
</ul>

‎template/pagination/pagination.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ul class="pagination">
2-
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)">{{getText('first')}}</a></li>
3-
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
4-
<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>
5-
<li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
6-
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages)">{{getText('last')}}</a></li>
2+
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1, $event)">{{getText('first')}}</a></li>
3+
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
4+
<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>
5+
<li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
6+
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
77
</ul>

0 commit comments

Comments
 (0)