ng-bootstrap: Autofocus doesn't work in modals

Feature 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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 18 (7 by maintainers)

Commits related to this issue

feat(modal): add [ngbAutofocus] option (#2737) Closes #938 Closes #2718 Closes #2728 — committed to ng-bootstrap/ng-bootstrap by deleted user 6 years ago

Most upvoted 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

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
	selector : '[focus]'
})
export class FocusDirective {
	@Input()
	focus : boolean;

	constructor(private element : ElementRef) {
	}

	protected ngOnChanges() {
		if (this.focus)
			this.element.nativeElement.focus();
	}
}

laserus on Feb 7, 2017

@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 the select() 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 the focus 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

frederikprijck on Nov 28, 2017