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

Commit e5f5f75

Browse files
ddomingueswesleycho
authored andcommittedMar 23, 2015
fix(modal): Autofocus corrects the second time that the modal is open
element with autofocus attribute when the modal is reopened Fixes #2802
1 parent 2c2dba6 commit e5f5f75

File tree

3 files changed

+27
-1
lines changed

3 files changed

+27
-1
lines changed
 

Diff for: ‎misc/test-lib/helpers.js

+7
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@ beforeEach(function() {
1313
var element = angular.element(this.actual);
1414
return element.hasClass('ng-hide') ||
1515
element.css('display') == 'none';
16+
},
17+
toHaveFocus: function () {
18+
this.message = function () {
19+
return 'Expected \'' + angular.mock.dump(this.actual) + '\' to have focus';
20+
};
21+
22+
return document.activeElement === this.actual[0];
1623
}
1724
});
1825
});

Diff for: ‎src/modal/modal.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
119119
// trigger CSS transitions
120120
scope.animate = true;
121121

122+
var inputsWithAutofocus = element[0].querySelectorAll('[autofocus]');
122123
/**
123124
* Auto-focusing of a freshly-opened modal element causes any child elements
124125
* with the autofocus attribute to lose focus. This is an issue on touch
@@ -127,7 +128,9 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
127128
* the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
128129
* the modal element if the modal does not contain an autofocus element.
129130
*/
130-
if (!element[0].querySelectorAll('[autofocus]').length) {
131+
if (inputsWithAutofocus.length) {
132+
inputsWithAutofocus[0].focus();
133+
} else {
131134
element[0].focus();
132135
}
133136

Diff for: ‎src/modal/test/modal.spec.js

+16
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,22 @@ describe('$modal', function () {
240240
expect(modal.opened).toBeRejectedWith(false);
241241
});
242242

243+
it('should focus on the element that has autofocus attribute when the modal is open/reopen', function () {
244+
function openAndCloseModalWithAutofocusElement() {
245+
var modal = open({template: '<div><input type="text" id="auto-focus-element" autofocus></div>'});
246+
247+
waitForBackdropAnimation();
248+
249+
expect(angular.element('#auto-focus-element')).toHaveFocus();
250+
251+
close(modal, 'closed ok');
252+
253+
expect(modal.result).toBeResolvedWith('closed ok');
254+
}
255+
256+
openAndCloseModalWithAutofocusElement();
257+
openAndCloseModalWithAutofocusElement();
258+
});
243259
});
244260

245261
describe('default options can be changed in a provider', function () {

0 commit comments

Comments
 (0)
This repository has been archived.