[4.4.0] Transition issue when ion-input autofocus is true

Bug Report

Ionic version: [x] Since 4.0.0-rc.0; recently tested (May 13th 2019) with 4.4.0

Current behavior:

There is a “stutter” in the animation when transitioning from a page to another page that has the autofocus property of ion-input set to true. I suspect the issue has to do with the keyboard being active when transitioning to the new screen (as part of autofocus).

Here is a short GIF of the issue. The only action taken is clicking the Go to detail button.

Watch the input as the screen transitions from the home page to the detail page:

Note: The behavior on the first button tap is inconsistent - sometimes the issue occurs, other times the problem is a bit different - but it is readily reproduceable on the second or subsequent transitions.

Note 2: This GIF was created in a simulator, so the keyboard is not properly shown in the GIF; however, it IS present as expected on a device or if the software keyboard is toggled on in the Simulator.

Expected behavior:

No stutter should occur in the transition. The keyboard should still be available for entry as expected on autofocus = "true".

Note: The problem is not exhibited if autofocus = "false".

Sample App & Related Code Snippets:

Sample App Repo

This code is exhibited in the Sample application in the detail.page.html file, Line 13:

https://github.com/bryplano/IonicPageTransitionIssue/blob/master/src/app/detail/detail.page.html#L13

Sample Code Snippet 1 - Exhibits the transition issue:

<ion-content padding>

    <ion-item>
        <ion-item>
            <ion-input required type="text" 
              placeholder="First Name"
              autofocus="true">
            </ion-input>
          </ion-item>
    </ion-item>

</ion-content>

Sample Code Snippet 2 - Does not exhibit the transition issue:

<ion-content padding>

    <ion-item>
        <ion-item>
            <ion-input required type="text" 
              placeholder="First Name"
              autofocus="false">
            </ion-input>
          </ion-item>
    </ion-item>

</ion-content>

Steps to reproduce in the sample app:

Sample App Repo

(These instructions are also denoted in the repo’s readme.md).

Assumptions:

• You have Xcode 9 or 10 installed
• You have an Apple Developer account installed & configured for running Ionic applications locally (note: you may need to change your provisioning profile / code signing in Xcode when running the app locally)
• You have the Ionic CLI & npm/NodeJS installed

1. Download this project as a ZIP export & unzip to a local directory
2. Open Terminal and navigate to the dir
3. Run npm i
4. Run ionic cordova platform add ios
5. The next step depends on the version of Xcode you’re using.

5a. If Xcode 9 is installed, run:

ionic cordova run ios

5b. If Xcode 10 is installed, run:

ionic cordova run ios -- --buildFlag="-UseModernBuildSystem=0"

1. When the simulator is running, tap on the Go to detail button
2. Notice the transition “stutters” when navigating between the pages

Note: You can use a “swipe” gesture to go back to the first page by clicking-and-dragging from left-to-right on the left side of the simulator window if you want to attempt reproducing the problem multiple times.

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   NodeJS            : v10.14.2
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[sta55en]

This is a major problem for me too. This has been an issue for many versions of Ionic when you use the Slider component, but it seems that the issue has gotten worse.

On mobile web, it doesn’t work at all due to some browser limitations. I’ve tried everything to get it working, but it doesn’t seem possible on iOS Safari and Firefox since the focus events are being blocked by the browser.

[felipeclopes]

My bad, I actually tested with 4.4.0.

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/felipeclopes/.nvm/versions/node/v11.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)