Components: md-input focus method has no effect

[soax]

I try to set the focus on an md-input component using the focus() method but nothing happens

In JS

 @ViewChild('materialInput', { read: ElementRef }) materialInput: ElementRef;

  materialFocus(event){
    this.materialInput.nativeElement.focus();
  }

In HTML

<md-input #eqeditor [(ngModel)]="equation" (blur)="onBlur($event)" (keyup)="onKeyUp($event)" >
        <span class="eq-fix" md-prefix>\(</span>
        <span class="eq-fix" md-suffix>\)</span>
      </md-input>

If I replace the md-input component by a classic HTML input element, then it works.

The bug can be reproduced here

[niveo]

import { MdInput } from '@angular/material';

@ViewChild('materialInput', { read: MdInput }) materialInput: MdInput;

materialFocus(event){
setTimeout(_ => {
this.materialInput.focus();
});
}

[CoreyGrant]

niveo

import { MdInput } from '@angular/material';

@ViewChild('materialInput', { read: MdInput }) materialInput: MdInput;

materialFocus(event){
    setTimeout(_ => {
        this.materialInput.focus();
    });
}

Is the setTimeout needed?
If you have a single md-input (or use ViewChildren) you can directly give the @ViewChild decorator MdInput, and you don't have to specify the {read: MdInput}.

To explain the above, the attempted solution is calling .focus() on the HTMLElement type retrieved from the elementRef via .nativeElement() - that is quite different from the MdInput type which we can directly query instead. The MdInput type has a .focus() method, which directly calls the wrapped input's focus() method.

[soax]

Thanks a lot, it works.

[nick-jonas]

This is what worked for me:

import { MdInputDirective } from '@angular/material';

export class ItemListComponent implements OnInit {
  @ViewChild(MdInputDirective)  input:any;
  searchValue:any;
  items: FirebaseListObservable<any[]>;

  constructor(af: AngularFire, public router: Router) {
    this.items = af.database.list('/items/');
  }

  ngOnInit() {}

  ngAfterViewInit() {
    setTimeout(() => {
         this.input.focus();
   });

  }
  search(input:string){
    return this.searchValue = input.toLocaleLowerCase();
  }
}

and then:

  <md-input-container>
    <input mdInput mdInputDirective="focused" placeholder="Search" #input (keyup)="search(input.value)">
  </md-input-container>

I'm not sure why I need the setTimeout() or why mdInputDirective isn't enough...

[niveo]

<md-input-container style="width: 100%">
          <input mdInput placeholder="User" [(ngModel)]="user" #txtUser>
</md-input-container>

 @ViewChild('txtUser')
  private txtUser: ElementRef;
  this.txtUser.nativeElement.focus();

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}