Focusing on form input on ionic-v4

#1

I’m trying to figure out how to focus on ionic form inputs programatically on Ionic 4.

At first I tried to set focus on page init, by using @ViewChild, the Input class (that I believe is replacing the previous Text Input class) and ngAfterViewInit but I can’t make it work.

I tried the following:

HTML CODE:

<ion-input formControlName="email" #email></ion-input>

TS CODE:

export class LoginPage implements AfterViewInit {

  @ViewChild('email')  emailElement: Input;

  ngAfterViewInit() {
      this.emailElement.focus();
  }

After many atempts, I could do a workaround by doing a setTimeout of 1 sec on th this.emailElement.focus() call

Has anyone had some experience on this topic?

1 Like
#2

Have you found a solution?

#4

No, I stopped working with Ionic-4 for a while until it’s ready

#5

I managed to get this working with Ionic v4.11.0 doing something like this:

HTML CODE:

<ion-input #input></ion-input>

TS CODE:

export class LoginPage implements AfterViewInit {

  @ViewChild('input')  inputElement: IonInput;

  ngAfterViewInit() {
      setTimeout(() => {
         this.inputElement.setFocus();
    }, 400);
  }

Note that I’m setting a timeout because the Input is in an <ion-modal> so has to wait for the animation to finish. So it might not be needed if the input is on a normal page.

1 Like
#8

focus is in but the keyboard is not showing. Any solution on this?

#9

on config
<preference name=“KeyboardDisplayRequiresUserAction” value=“false” />