Set auto focus to ionic input in Ionic 6 and Angular 13

I stumbled upon setting focus to an element in Ionic. As it appeared, there is no directive to use (anymore) to autofocus an ionic input.

Solution

The solution was to use a ViewChild and use the Ionic setFocus() on the AfterViewChecked:

In login.page.html:

<ion-input #emailInput type="text" value="" [formControlName]="'username'"></ion-input>

In login.component.ts:

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

import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {IonInput} from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: 'login.page.html'
})

@AutoUnsubscribe
export class LoginPage implements OnInit, OnDestroy, AfterViewChecked {
  public loginForm!: FormGroup;
  focusIsSet!: boolean;
  @ViewChild('emailInput', {static: false}) emailInput!: IonInput;

  constructor(
    private readonly fb: FormBuilder,

  ) {
    this.loginForm = this.fb.group({
      username: ['', [Validators.required, Validators.pattern(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]],
      password: ['', Validators.required],
    });
  }

  public ngAfterViewChecked(): void {
    if (!this.focusIsSet) {
      this.emailInput.setFocus();
     // Disable focus on setTimeout()
      // Timeout needed for buggy behavior otherwise!
      setTimeout(() => {this.focusIsSet = true; }, 1000);
    }
  }

}