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

[chrskrchr]

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

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker or repo that demonstrates this issue? Thanks for using Ionic!

[chrskrchr]

Here's a .zip of a project that demonstrates the issue.

keyboard.zip

(I removed node_modules directory to reduce its size, so you'll need to run npm install)

[codespore]

+1

[thomas1511]

+1

[jalef]

any news on this?I have the same issue, but not only when the input is in a footer
This is a plunker that if built in android device demonstrates the problem
http://plnkr.co/edit/GFOUnEeitVpF6o8GSAxU?p=preview

[Vasanth19]

any workaround till this gets fixed?

[babinc]

I am having the same issue. I need a fix ASAP. My app is already in production. I have a text input inside an ion-footer-bar It works fine on android. But on IOS the keyboard covers up the text input area.

[chrskrchr]

@babinc,
My temporary workaround was to replace the <ion-input type="text"> with a plain <input type="text"> and use the following CSS to give it a similar look and feel:

    input.messageDraft {
        width: 100%;
        background-color: transparent;
        border: none;
    }

I haven't seen any negative side effects using a regular input in place of the ion-input.

[curtisblanchette]

@chrskrchr the nice thing about <ion-input> is it allows the user to "blur" the input when tapping outside on iOS.

**Update
Here's the solution I took for <input type="text"/> in the footer-bar not blurring on click-outside.

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  constructor(private _elementRef: ElementRef) {
  }

  @Output()
  public clickOutside = new EventEmitter<MouseEvent>();

  @HostListener('document:touchstart', ['$event', '$event.target'])
  public onClick(event: MouseEvent, targetElement: HTMLElement): void {
    if (!targetElement) {
      return;
    }

    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(event);
    }
  }
}

// reference: https://github.com/chliebel/angular2-click-outside
With a slight modification I capture the touchstart event rather than click (works on iOS)

<ion-footer (clickOutside)="onClickOutside()">

import { ClickOutsideDirective } from '../../path/to/directive';
import { Keyboard } from 'ionic-native';

@Component({
    directive: [ ClickOutsideDirective ]
})  

public onClickOutside() {
   Keyboard.close()
}

[kuldeepantil]

I am facing the same issue.

[tianleios]

i have same issue. but android is good. this problem only appear ios. i have opend this problem.
this problem will resolve at beat12 ?????. when set disableScroll is true, then screen donnot shake, but when keyboard appear, the input at ion footer wlll hidden by keyboard.

[borys]

+1

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

[Manduro]

I've posted my similar solution here.

[flyfj]

this happens to me even I'm just using and in ionic v1

[rdlabo]

This happens too.

This is work.
<ion-input type="text"> -> <input type="text">

This can't work.
<ion-input type="text"> -> <div contenteditable='true'></div>

[corran2go]

Sadly this is still open in 2.0.0 on iOS devices

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

[dalemugford]

I appreciate that there's a plugin that works around the issue, but that plugin is $199USD, and as far as I can tell doesn't have typings for Ionic 2.

[shaarawy130]

I have the same problem.. any solution yet?

[alexmady]

Is there any update on this issue yet please? I first raised this with @mhartington a while ago and this really has been a very longstanding issue now.

I put a lot of effort into demonstrating the issue here (#5432
) but it seems that this has been close for a while.

Ionic team - this is a really important issue for my apps - please can we have an update.

Apologies if I am unaware of a fix or workaround that has gone in.

Look forward to hearing from you.

[deangibson89]

I'm my particular situation I had an input in .bar-footer. The following CSS seemed to fix the issue:

body.keyboard-open.platform-ios .bar-footer {
    bottom: 36px;
}

NOTE: There is a bit of a delay before .bar-footer jumps up above the keyboard because of there being a delay before the .keyboard-open class gets attached to the body.

But then when you start typing you'll notice that your text isn't reflecting in the input field. That's thanks to the "fix" Ionic puts in place for "some keyboard issues while scrolling". To disable this you can do the following:

window.ionic.tap.cloneFocusedInput = function () {
    return null;
};

That will overwrite and disable cloned inputs. After that, everything seemed to be working fine.

[alexmady]

Thanks @Tiwaz89 - any idea how to get the keyboard to stay open in-between messages. Problem demonstrated in gif below.

Also both autocomplete and spellcheck options for the ion-input do not work....

[blacksmith77]

Found a solution here: https://stackoverflow.com/questions/32730171/ionic-footer-input-field-being-hidden-by-keyboard-in-chat-app

set fullscreen property to value false in config.xml

This goes out out to anyone that's had a similar problem with the ionic footer and inputs in cordova build. If you have this preference in config.xml

<preference name="fullscreen" value="true" />

The keyboard will hide the input when it's activated. If you absolutely need to see that input when typing (that was a joke) than just set it to false and it should solve the problem.

[BorntraegerMarc]

@jgw96 you said quite some time ago that you are looking into the issue with the chrome dev team. Has there been any more insights?

[capcom-r]

I just joined the party and I can't believe how long everyone has been waiting on this. This seems like such an essential thing to get right. How have people been dealing with this in the meantime?

[renjithspace]

@borys You saved my day!!!! Good job, works well. Thanks 👍 #7149 (comment)

[dulcelariz]

I have a related issue with the keyboard, first I had the problem with the overlaps on footer and after installing the plugging XKWebView the footer doesn't be hidden anymore, but when keyboard is open an space is added above it (between keyboard and footer)

Here is the image:

Have someone this issue? How can I fix it?
I'm new on development with Ionic. Help!

[renjithspace]

@dulcelariz You can fix that by disabling the keyboard scroll.

1. Install ionic native keyboard plugin

$ ionic cordova plugin add ionic-plugin-keyboard
$ npm install --save @ionic-native/keyboard

2. Then disable keyboard scroll in your component constructor or in ionViewDidLoad observer

this.keyboard.disableScroll(true);

Please note: make sure to run it after platform ready. You can use this.platform.ready() promise to do that

3. Disable scroll assist in ionicModule

IonicModule.forRoot(MyApp, { scrollAssist: false }),

And make sure the footer you added in ion-footer.

That's it.

[dulcelariz]

@renjithvk thanks for your help, I did what you said and the issue still there. 😢

[renjithspace]

@dulcelariz I had that kind of issue. I fixed it by did that. Please try:

Disable scroll assist in ionicModule (app.module.ts)

IonicModule.forRoot(MyApp, { scrollAssist: false }),

Please check the comment #7149 (comment) I've updated it with some more points.
Hope it will help you 👍

[dulcelariz]

@renjithvk I tried what you did and the issue continue happening

This is my ionic info:
Will it be related to this?

[renjithspace]

@dulcelariz I'm sorry to hear that. I'd solved by did that.

This is my ionic info.

[MiguelHernandezCh]

Still working with ionic 3 with @borys solution (#7149 (comment))

Ionic Info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.4.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v8.9.3
    npm        : 5.7.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : Users/gobae/Library/android/sdk

Misc:

    backend : pro

[Ross-Rawlins]

The proposed solution only applies to ios it seems but what about android? I am using the ionic cordova keyboard plugin and this isnt working.

[Hemanth-wtt]

@borys solution worked for me.But the transition is not so smooth in my case.Any way i can achieve that?

[BorntraegerMarc]

Just by installing this plugin https://github.com/ionic-team/cordova-plugin-ionic-keyboard fixed the issue for me

[caribeedu]

Add https://ionicframework.com/docs/native/keyboard/ plugin to ionic application
and add this imports in your module.ts file

IonicModule.forRoot (MyApp, {
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: true
})

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#117