iOS 12 with iPhone landscape when keyboard opens then input box goes out of view area.

[stripathix]

On clicking on any input field on the iPhone landscape page shift is wrong. input field goes out of view and even on some screens keyboard is hidden behind a keyboard.
See in attached screenshot how when I tap on a input field then that input field goes out of view area. I have also attached a video screencast.

https://youtu.be/kveJ663r-oA

I am using Ionic 4 + Vue + Capacitor.

"@capacitor/android": "1.0.0-beta.11",
		"@capacitor/cli": "1.0.0-beta.11",
		"@capacitor/core": "1.0.0-beta.11",
		"@capacitor/ios": "1.0.0-beta.11",
"@ionic/core": "4.0.0-beta.17",
		"@ionic/vue": "0.0.1",

<div class="ion-page">
  <ion-header>
    <ion-toolbar color="dark">
      <ion-buttons slot="start">
        <menu-button></menu-button>
      </ion-buttons>
      <ion-title>
        Developer
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="hasfooter">
    <ion-list>
      <ion-item>
        <ion-label position="stacked">Service Host</ion-label>
        <ion-input :value="serviceHost" @ionInput="serviceHost = $event.target.value" placeholder="Enter Service Host"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Test1</ion-label>
        <ion-input :value="serviceHost" @ionInput="serviceHost = $event.target.value" placeholder="Enter Service Host"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Test2</ion-label>
        <ion-input :value="serviceHost" @ionInput="serviceHost = $event.target.value" placeholder="Enter Service Host"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">test3</ion-label>
        <ion-input :value="serviceHost" @ionInput="serviceHost = $event.target.value" placeholder="Enter Service Host"></ion-input>
      </ion-item>
    
    </ion-list>
  </ion-content>
  <ion-footer>
    <ion-toolbar color="dark">
    </ion-toolbar>
  </ion-footer>
</div>

Initially, I reported it to ionic but they pointed this as an issue related to keyboard (Capacitor or Cordova).

[stripathix]

Hi, @jcesarmobile is this a known issue. I looked into this issue (#814) but it is different from what I am experiencing.

[stripathix]

Hi @jcesarmobile , Could you please look into this.

[stripathix]

Any update on this.

[boozedog]

I'm also interested in a solution for this please!!

[sneko]

#1119 maybe it can help you. Note this PR is not released for now ---> modify the file directly to try it.

[jcesarmobile]

#1119 is merged.
It fixes the problem for me using ionic and body resize options:

"plugins": {
      "Keyboard": {
          "resize": "ionic"
      }
  }

@stripathix can you verify and close if it fixes the problem?

[stripathix]

@jcesarmobile where to add below config?

"plugins": {
      "Keyboard": {
          "resize": "ionic"
      }
  }

I have updated node_modules below file with latest code from: https://github.com/ionic-team/capacitor/pull/1119/files

@capacitor/ios/ios/Capacitor/Capacitor/Plugins/Keyboard.m

[sneko]

@stripathix in your capacitor.config.json file. You should have something default like:

  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    }
  }

[stripathix]

Thanks, @sneko. Like this?

{
  "appId": "net.***.****",
  "appName": "****",
  "bundledWebRuntime": false,
  "webDir": "dist",
  "ios": {
    "minVersion": "11"
  },
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    },
    "Keyboard": {
          "resize": "ionic"
    }
  }
}

[sneko]

Yes :) On Jan 24, 2019, at 10:09, Shashwat Tripathi <[email protected]<mailto:[email protected]>> wrote: Thanks, @sneko<https://github.com/sneko>. Like this? { "appId": "net.***.****", "appName": "****", "bundledWebRuntime": false, "webDir": "dist", "ios": { "minVersion": "11" }, "plugins": { "SplashScreen": { "launchAutoHide": false }, "Keyboard": { "resize": "ionic" } } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1045 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AH0Pdm3XoCvnSU40Lb0zcalfFezGTwQ4ks5vGXhdgaJpZM4ZNgLd>.

[stripathix]

@jcesarmobile I am still getting same issue. On focusing a input field input field does get shifted and is hidden behind header.

In below screenshot see cursor next to Preferences header title. Input field shifts behind the header.

Note: It is in iPhone 8 Landscape mode.

Steps I did

1. In Capacitor.config.json I have following

{
  "appId": "net.******.******",
  "appName": "*******",
  "bundledWebRuntime": false,
  "webDir": "dist",
  "ios": {
    "minVersion": "11"
  },
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    },
    "Keyboard": {
      "resize": "ionic",
      "style": "dark"
    }
  }
}

2. Replaced code of below file by latest code from Github master branch

/node_modules/@capacitor/ios/ios/Capacitor/Capacitor/Plugins/Keyboard.m

Used this file: https://github.com/ionic-team/capacitor/blob/master/ios/Capacitor/Capacitor/Plugins/Keyboard.m

3. Then executed below commands

npx cap sync
npx cap copy

[jcesarmobile]

I don't think it's the "same" issue now as it no longer is behind the keyboard, but behind the header, and only sometimes. I get the same behaviour on Cordova, so not entirely sure if now it's a Capacitor/Cordova Keyboard plugin bug or an Ionic bug

[stripathix]

Any update on this?

[jcesarmobile]

This is an Ionic bug since it also happens in Cordova apps

[ionitron-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 Capacitor, please create a new issue and ensure the template is fully filled out.