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

[bryplano]

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 ([email protected])
   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

[KevRyan2]

@bryplano a workaround for now (although possibly not ideal), is to turn off autofocus and select the input element (IonInput) with ViewChild, and then setFocus to the element after the content has rendered (ngAfterViewInit() should work, but you may need to add a slight timeout)

[bryplano]

Thanks @KevRyan2! :)

I've also tested this with 4.0.0-rc.2 (released today) and can confirm this issue still exists.

[bryplano]

Re-tested again today with 4.0.1, issue still occurs.

Edit: Updated my sample project to 4.0.1 for purposes of reproducing with the latest version of Ionic.

[felipeclopes]

I tested with 4.12.0, and the issue is still occurring. Not only that but just calling the method setFocus on the component is enough to cause the problem, unless wrapped in a setTimeout.

[bryplano]

@felipeclopes - 4.12.0 isn't a valid version of Ionic, but it _is_ a valid version of the Ionic CLI. The CLI shouldn't make a difference here though :)

For actual releases of the Framework, you'll want to refer to the version of @ionic/angular in your project (which should resolve to something from the Releases page: https://github.com/ionic-team/ionic/releases).

[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)

[bryplano]

No worries :) I'll update the title now. Thanks for checking back on this!

[sagrawal31]

We are also facing this issue. We are using latest version of @ionic/angular, cordova-plugin-ionic-webview and cordova-plugin-ionic-keyboard

[andreas-aeschlimann]

I can reproduce this issue.

If I add autofocus to any view that I transition into (can also be a modal page), then there is a horrible lag on iPhone (iOS 13.x confirmed). The view that slides into keeps sliding out of bounds. The lag is so bad, we had to disable autofocus completely.

[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.

[liamdebeasi]

Hi everyone,

This behavior appears to be due to a bug in WebKit (the engine that powers Safari/WKWebView). I am filing an issue with the WebKit team to see if we can get this issue resolved.

There are a few open issues that are duplicates, so I am going to merge this issue with https://github.com/ionic-team/ionic-framework/issues/18257. I will track all progress on that issue.

As of now, I am not aware of a workaround, but I will post on the thread I linked to if I find one.