Keyboard overlaps the text input when the input is placed inside an <ion-footer>

Short description of the problem:

When an <ion-input type="text"> is placed inside an <ion-toolbar> in an <ion-footer>, the iOS keyboard overlaps text inputs placed in an <ion-footer> and the entire page “jumps” when the input receives focus.

What behavior are you expecting?

I would expect the text input to be shown above the keyboard so the user can see what they’re typing, similar to what happens in the Messages app on iOS. I also wouldn’t expect the entire page to jump down immediately after the input receives focus.

Steps to reproduce:

1. Create a new project with the blank template
2. Add the following to home.html, run the app on iOS, and focus on the text input

<ion-footer>
    <ion-toolbar>
        <ion-input type="text" placeholder="Add a message..."></ion-input>
    </ion-toolbar>
</ion-footer>

Which Ionic Version? 1.x or 2.x 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.31 Ionic App Lib Version: 2.0.0-beta.17 ios-deploy version: 1.8.6 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v4.2.3 Xcode version: Xcode 7.3.1 Build version 7D1014

[borys]

Solution with changing ion-input to input doesn’t work for me (ionic beta 11). My workaround, in app.ts, constructor, platform is ready:

if (platform.is('ios')) {
  let 
    appEl = <HTMLElement>(document.getElementsByTagName('ION-APP')[0]),
    appElHeight = appEl.clientHeight;

  Keyboard.disableScroll(true);

  window.addEventListener('native.keyboardshow', (e) => {
    appEl.style.height = (appElHeight - (<any>e).keyboardHeight) + 'px';
  });

  window.addEventListener('native.keyboardhide', () => {
    appEl.style.height = '100%';
  });
}

I’m scaling whole app when keyboard shows - it seems be working. I may add few words from me: when I open app on ios and focus on input in footer - keyboard covers footer. When I lose focus clicking on button (it doesn’t happen when click on f.e. header) - keyboard hides, footer goes up first (it is placed above keyboard, when it was opened) and then goes again down (it happens really quickly). It looks like bug is connected with triggering. I hope it helps…

[jgw96]

Hello all! We are currently working with the chrome team on this issue. This is a pretty hard problem to solve because it dives into how keyboards interact with webviews, which is all on the native OS side of things. In the meantime there is this plugin https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard which gives you a native chat input that works around the issue.