Modal focus

[tmmueller]

This is based on pull request #1892 from @mlilli. I rebased and squashed it as @pkozlowski-opensource requested. I also made it re-apply focus to the first autofocus element so that it works if you open the modal more than once.

[mlilli]

There is no need to refocus on the auto-focused element since it is already
natively focused. Doing so via JavaScript is not only redundant, but it
causes issues in iOS - autofocusing opens the onscreen keyboard, then by
(re)focusing the element via JS, the keyboard closes defeating the original
purpose of the autofocus.

Please use my pull request as I coded it.

Thanks,

-- Mike

On Wed, May 28, 2014 at 11:08 AM, tmmueller [email protected]:

This is based on pull request #1892https://github.com/angular-ui/bootstrap/pull/1892from
@mlilli https://github.com/mlilli. I rebased and squashed it as
@pkozlowski-opensource https://github.com/pkozlowski-opensourcerequested. I also made it re-apply focus to the first autofocus element so

that it works if you open the modal more than once.

You can merge this Pull Request by running

git pull https://github.com/tmmueller/bootstrap modal-focus

Or view, comment on, or merge it at:

#2273
Commit Summary

• fix(modal): re-apply autofocus on correct element after showing modal

File Changes

• M src/modal/modal.jshttps://github.com/Modal focus #2273/files#diff-0(21)

Patch Links:

• https://github.com/angular-ui/bootstrap/pull/2273.patch
• https://github.com/angular-ui/bootstrap/pull/2273.diff

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/2273
.

[tmmueller]

Unfortunately, at least in Chrome and according to MDN, autofocus gets applied only when the page is loaded. So if you open the modal more than once without reloading the page, you have to apply focus manually.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autofocus

[tmmueller]

@mlilli: Does this work in iOS? In Chrome, document.activeElement is the button I clicked to open the modal, so it doesn't make any difference.

var autofocusElements = element[0].querySelectorAll('[autofocus]');
if (autofocusElements.length) {
  var autofocusElement = autofocusElements[0];
  if (autofocusElement != document.activeElement) {
    autofocusElement.focus();
  }
} else {
  element[0].focus();
}

[sskirby]

I don't think this issue is closed. The autofocus attribute only works the first time the modal is opened (in Chrome anyways)

[tmmueller]

@sskirby Agreed. My pull request fixed that issue, but the accepted one did not. Maybe open a new issue?

[wilg]

I'm running into this too – did this get fixed anywhere?