Skip to content

Commit bef231b

Browse files
mlilliOron Nadiv
authored and
Oron Nadiv
committed
fix(modal): respect autofocus on child elements
Auto-focusing of a freshly-opened modal element causes any child elements with the autofocus attribute to loose focus. This is an issue on touch based devices which will show and then hide the onscreen keyboard. Attempts to refocus the autofocus element via JavaScript will not reopen the onscreen keyboard. Fixed by updated the focusing logic to only autofocus the modal element if the modal does not contain an autofocus element. Fixes angular-ui#1696 Closes angular-ui#1892 Closes angular-ui#2273
1 parent 939457d commit bef231b

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

src/modal/modal.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,18 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
9494
$timeout(function () {
9595
// trigger CSS transitions
9696
scope.animate = true;
97-
// focus a freshly-opened modal
98-
element[0].focus();
97+
98+
/**
99+
* Auto-focusing of a freshly-opened modal element causes any child elements
100+
* with the autofocus attribute to loose focus. This is an issue on touch
101+
* based devices which will show and then hide the onscreen keyboard.
102+
* Attempts to refocus the autofocus element via JavaScript will not reopen
103+
* the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
104+
* the modal element if the modal does not contain an autofocus element.
105+
*/
106+
if (!element[0].querySelectorAll('[autofocus]').length) {
107+
element[0].focus();
108+
}
99109
});
100110

101111
scope.close = function (evt) {

0 commit comments

Comments
 (0)