bug: ion-input focus delay on iOS only

[RZMiRaN]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [x] v5.x
• [ ] v6.x

Current Behavior

I’m creating a login form, I have two ion-inputs, a check box and a submit button, everything works perfectly fine on desktop and android version, but when I change the device to an iOS device in the dev tools, the app acts weirdly when entering the inputs

If you look closely at this GIF, you’ll notice that sometimes when I click in the ion-input field (The cursor turns yellow on my click just so you know when did I click), it delays the focus for like a second or the focus goes to the password field and comes back weirdly

I did also tried on a real iOS device, same exact behavior

Expected Behavior

To work fine like it does on the material design version

Steps to Reproduce

Create a blank ionic angular project, create login page and use the below code OR clone the reproduction URL

login.page.html

<ion-content class="light-background">
  <ion-grid fixed>
    <ion-row>
      <ion-col sizeLg="4" offsetLg="4" sizeMd="6" offsetMd="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title class="ion-text-center">Welcome</ion-card-title>
            <ion-grid fixed>
              <ion-row>
                <ion-col size="8" offset="2">
                  <div class="ion-text-center ion-margin-top">
                    <ion-img src="../../assets/logo.png" alt="NodeJS and Ionic"></ion-img>
                  </div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-header>

          <ion-card-content>
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
              <ion-item class="ion-margin-vertical">
                <ion-label position="floating">Username</ion-label>
                <ion-input type="text" formControlName="username" tabindex="1" required></ion-input>
              </ion-item>
              <ion-text color="danger" *ngIf="loginForm.get('username').touched && !loginForm.get('username').valid">
                Username is required
              </ion-text>
              <ion-item class="ion-margin-vertical">
                <ion-label position="floating">Password</ion-label>
                <ion-input type="password" formControlName="password" tabindex="2" required></ion-input>
              </ion-item>
              <ion-text color="danger" *ngIf="loginForm.get('password').touched && !loginForm.get('password').valid">
                Password is required
              </ion-text>

              <div class="ion-text-center">
                <ion-item lines="none" style="display: inline-block;">
                  <ion-checkbox slot="start" style="margin-right: 16px;" formControlName="rememberMe" tabindex="3"></ion-checkbox>
                  <ion-label>Remember me</ion-label>
                </ion-item>
              </div>

              <div class="ion-text-center">
                <ion-button type="submit" color="primary" [disabled]="loginForm.invalid" class="ion-margin-top" tabindex="4">
                  Login
                </ion-button>
              </div>
            </form>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

login.page.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  loginForm: FormGroup;

  constructor(private router: Router, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: [''],
      password: [''],
      rememberMe: [true]
    });
  }

  onSubmit() {
    console.log(this.loginForm.value);
    this.router.navigate(['home']);
  }
}

Code Reproduction URL

https://github.com/RZMiRaN/ionicinputbug

Ionic Info

Ionic CLI : 6.17.0 (C:\Users\Miran\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 5.7.0 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.2.2 @capacitor/android : not installed @capacitor/core : 3.2.2 @capacitor/ios : not installed

cordova-res : not installed globally native-run : 1.4.0

System:

NodeJS : v14.17.6 (C:\Program Files\nodejs\node.exe) npm : 6.14.15 OS : Windows 10

Additional Information

If it helps, I noticed that the problem does not exist on ionic lab

[willmartian]

Thanks for the issue and reproduction code! I am going to edit your issue to reflect that this bug is present in v5.

[willmartian]

Hey @RZMiRaN, it looks like this is actually a duplicate of #23664. Going to close this issue; you can watch for updates there. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.