Autofocus doesn't work in modals
See original GitHub issueFeature description:
I’ve got an input in my modal. I’d like it to autofocus when the modal opens. I’ve added the autofocus
attribute and this works the first time the modal is opened in Google Chrome, but not subsequently. It doesn’t seem to work at all in Safari. I haven’t tested other browsers.
As a workaround, I’ve created an attribute directive that focuses the input during ngAfterViewInit
, but this seems like using a sledge hammer to crack a nut (and it could create unexpected behaviour elsewhere.)
Link to minimally-working plunker that reproduces the issue:
http://plnkr.co/edit/At2FNwl9lKGF3sk2gTbt?p=preview
Version of Angular, ng-bootstrap, and Bootstrap:
Angular: v2.0.1
ng-bootstrap: v1.0.0-alpha.5
Bootstrap: v4.0.0-alpha.4
Issue Analytics
- State:
- Created 7 years ago
- Reactions:4
- Comments:18 (7 by maintainers)
Top Results From Across the Web
autofocus not working in modal bootstrap - Stack Overflow
autofocus works only first time when page is loaded next time when I launch model, autofocus does not work in input type <div...
Read more >autofocus doesn't work within modals #14478 - GitHub
It only happens when modal is first time open, close it and then open you will not see focus on input but after...
Read more >Autofocus In Modals
As the Bootstrap documentation for modals details, setting the autofocus attribute on an element inside a modal will have no effect: "Due to...
Read more >autofocus on input does not work. - Material Design for Bootstrap
The fix is to move Materialize.updateTextFields outside of the ready callback, and then call it first in the ready callback. Then instead of...
Read more >Hi I put a text input inside modal but the autofocus property of ...
Hi I put a text input inside modal but the autofocus property of it is not working. How do I make...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Solution to this is rather simple. Your own focus directive. I even do not understand why this directive is not default in Angular core.
http://plnkr.co/edit/2euC1MDHup7x4ShJcXQl?p=preview
@kohoutjosef Less hacky might be to use a setTimeout, wrapped around the
focus()
call (still hacky tho 😞 ).@pkozlowski-opensource Using
setTimeout
probably indicates it might be a timing issue, not sure if this helps u (not sure if the issue is related to ng-bootstrap neither). Here’s a reproduction of focussing an input when opening the modal: http://plnkr.co/edit/i7BeFQle0PsWQiimY1Bf?p=preview If you wrap theselect()
call in a setTimeout, avoids the scrolling behavior. I tried using both AfterViewInit and AfterViewChecked, so I’m unsure what we can do in order to ensure thefocus
isn’t called too soon…Note: My issue is not related to autofocus, but calling focus() in general inside a modal. I wasn’t sure if this comment would be better here or at https://github.com/ng-bootstrap/ng-bootstrap/issues/1776