Angular 2 Material input focus does not work

Question

The input is inside a modal dialog. I have no idea why this is not working. I looked at the official documentation and it pointed out the focus as something that you can pass to the element, but it does not work?

Does anyone know why?

Corner Material - Inputs

<form class="example-form"> <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;"> <input mdInput type="email" name="to" placeholder="Email"> <md-error></md-error> </md-input-container> <md-input-container focus focused> <input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)=""> </md-input-container> </form> 

Answer 1

Your attempts do not work because:

• focused is a property that manages the mat-oriented class on mdInputContainer . You can use it to find out if your input is focused or not. You cannot use it to change the focus state.
• focus is a method on mdInput that allows you to programmatically focus the input. You can call myInput.focus() with myInput , for example, as ViewChild('myInput') .

But the easiest way to achieve what you want is to use the standard autofocus attribute:

 <md-input-container> <input mdInput type="text" name="a" placeholder="zzzz" autofocus> </md-input-container> 

Answer 2

I struggled with the same problem. I used F6 to open a dialog, and I could not get <input> to get focus. It turned out that I did not interfere with the default behavior of F6 and F6 highlights the browser URL window; so he stole the trick.

 switch (event.keyCode) { case 117: event.preventDefault(); this.openAddAveragesDialog(); break; default: return; } 

In addition, the magic tag attribute does not work. Autofocus, Focus, Focus, anything, without cubes. I had to create a directive and use it in my input element. I got help with this using this answer.

Here is the element after adding the directive (numberOnly is another directive only for entering a number):

 <md-input-container> <input mdInput [focus]="true" [numberOnly]="true"/></md-input-container> 

** Change: adding directive code as suggested by @Mackelito for clarity. Here is a directive that I wrote using the answer I linked above. Remember that the material changed the tag labels to <input matInput> from <input md-input>

 import {Directive, ElementRef, Inject, Input, OnChanges, OnInit, Renderer} from '@angular/core'; @Directive({ selector: '[focus]' }) export class FocusDirective implements OnChanges, OnInit { @Input() focus: boolean; constructor(@Inject(ElementRef) private element: ElementRef, public renderer: Renderer) {} ngOnInit() { this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []); } public ngOnChanges() { this.element.nativeElement.focus(); } } 

Answer 3

 <form class="example-form"> <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;"> <input mdInput #emailInput="matInput" type="email" name="to" placeholder="Email"> <md-error></md-error> </md-input-container> </form> 

Then in the controller:

 @ViewChild('emailInput') searchInput: MatInput; .... ngAfterViewInit() { this.emailInput.focus(); } 

That this.emailInput.focus () really is "elementRef.nativeElement.focus ()" https://github.com/angular/material2/blob/master/src/lib/input/input.ts#L287

so you can do it yourself:

 this.emailInput.nativeElement.focus() 

Answer 4

You tried with cdkFocusInitial which will indicate the element that will receive focus on initialization

documentation can be found here

Answer 5

Try adding some delay before setting the input focus. I made this behavior a guideline for your reference.

Delay-focus.ts

 import { Directive, Input, ElementRef } from '@angular/core'; @Directive({ selector: '[delayFocus]' }) export class DelayFocusDirective { @Input() delayFocusInterval; @Input() set delayFocus(condition: boolean) { if (condition) { console.log(this.delayFocusInterval); setTimeout(() => { this.el.nativeElement.focus(); }, this.delayFocusInterval | 500); } } constructor(private el: ElementRef) { } } 

example

 <input type="text" placeholder="Delay 100ms to get focus" delayFocus="true" delayFocusInterval="100"> 

You can try it here .