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.

[liamdebeasi]

Thanks for the follow up. In order to get around some native browser behaviors when it comes to inputs, we do a few tricks including cloning the input.

It looks like the styles on that cloned input are incorrect. As a workaround, you can place the following CSS in your global.scss file:

.cloned-input {
  top: unset !important;
}

[MaddHatters]

Thank you for your help @liamdebeasi.

[liamdebeasi]

Thanks for the report. This appears to have been resolved in https://github.com/ionic-team/ionic-framework/pull/27253, so I am going to close this.

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