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

Commit e62ab94

Browse files
mlillichrisirhc
authored andcommitted
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 #1696 Closes #1892 Closes #2273
1 parent 63ae06c commit e62ab94

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

src/modal/modal.js

+12-2
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)