ion-input jumps on iOS when a height is set.

[MaddHatters]

Ionic version:

[] 4.x
[x] 5.x

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior:

When clicking on the input field, the native-input is pushed to the top of the ion-input container briefly before the keyboard is displayed. It appears as though the input jumps. I also noticed that this occurs only when I set a height on the ion-input element. If I remove the height, and min-height this is no longer an issue. Also, if I am debugging and I manually set the native-input element to have the same height as the ion-input element, this issue is resolved. This only occurs for me on iOS. I did not see this on Andriod.

Expected behavior:

The input field would adjust smoothly with the view as the keyboard is shown regardless of the height of the ion-input.

Steps to reproduce:

1. Open the app,
2. Touch the input field to start editing the contents
3. You should see the field 'jump' and then re-adjust to its original position.

Related code:

<div class="url-field-container">
   <ion-input (keyup.enter)="navigate()" [(ngModel)]="myVar" inputmode="decimal" placeholder="Please enter the address" class="url-field"></ion-input>
</div>


.url-field-container {
  display: flex;
  flex-direction: row;
  background: #000000;
  width: 90%;
  max-width: 550px;
}

.url-field {
  min-height: 64px;
  height: 4em;
  border: none;
  --padding-start: 10px;

  &__label {
    color: #7D7D7D;
  }
}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic 5.4.6, cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.16.1 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Mojave
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[MaddHatters]

@liamdebeasi Unfortunately I cannot as it is proprietary software. Will you be able to look into the issue without a repository?

[liamdebeasi]

Webviews + Keyboards are always a little tricky to work with, so having a repo makes it significantly easier for us to fix. Are you able to reproduce the issue in a blank Ionic starter app with just the ion-input?

[MaddHatters]

@liamdebeasi

I've created the following repository which you can use to reproduce the issue.

https://github.com/MaddHatters/ion-input-jump-ios

I use the following steps:

1. Navigate to the root of the project.
2. Run 'npm install'
3. Run 'ionic cordova prepare ios'
4. Have a native iOS device plugged in. (I used an iPhone 8 Plus on version 13.3)
5. Run 'npm run ion-live-dev'
6. Click on the text fields to see the result.