Unable to focus input field in ionic2

Question

In my snippet i have tried to set focus for first input text field. But when the page loaded it gets focused and lose the focus suddenly & closes the keyboard. Can anyone please tell me to achieve this.

<ion-input [(ngModel)]="username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" autofocus clearInput required></ion-input>

Answer 1

add view Reference with (#) for that In your html,

<ion-input [(ngModel)]="username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" autofocus clearInput required  #focusInput></ion-input>

In your component.ts Import ViewChild and set focus of this(#focusInput) Input

Like

import {Component, ViewChild} from '@angular/core';

@ViewChild('focusInput') myInput;

ionViewDidEnter() {
       this.myInput.setFocus();
    }

This gonna help.

Answer 2

<input #exampleInput />

@ViewChild('exampleInput') exampleInput: ElementRef;

setTimeout(() => {
    this.exampleInput.nativeElement.focus();
}, 300);

This works for me.

Note: You may want to use this timeout in ngAfterViewInit method or other places, and 300 milliseconds delay sounds enough in my tested devices.