Keyboard covers input that is in focus

[REPTILEHAUS]

This issue is most prevalent on android, also noticed on iOS when there is a submit button in an

To use this plugin it says we need to have cordova-plugin-ionic-webview installed, but if using the latest ionic it is using WKWebView by default under the hood so do we still need to install this ? also if we need to install this plugin will it have any consequences for submitting to the App Store as they have deprecated UIWebView ?

Over the years people have made many hacks to get the input and keyboard in focus to play nice across all devices, but I cant seem to find any up to date resources that explain what is the best practice to have the input and keyboard work in unison.

From what I have learned from scraping info all over the web is that the general idea of most is that: 1) You must use ionic's native input fields i.e rather than normal 2) Your input has a better chance of working with this keyboard plugin if its also wrapped in an ion-item

So in 2019 with latest Ionic do we still need to do any kind of custom angular directive hacks, or is there a recommended solution to ensure that the input in focus sits above the keyboard ? right now it seems to work sometimes and then doesnt other times, its very inconsistent.

Ionic:

   Ionic CLI                     : 5.2.1
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.801.0
   @angular-devkit/schematics    : 8.1.0
   @angular/cli                  : 8.1.0
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.1.0, ios 5.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 30 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/user/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 8.0.1
   NodeJS            : v10.16.0 (/Users/user/.nvm/versions/node/v10.16.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

[Shneeball]

+1

[HarshitChhipa]

+1... Me too Me too

[gnesher]

+1

[rimosystems]

+1

[vadimwe]

+1

[REPTILEHAUS]

As this issue has been open with no feedback for months now and it has been getting attention ill leave this here for anyone that is interested.

If you have other solutions please post here so that we can aggregate a list of them as I haven't found much useful ones out there.

The solution I have implemented is quite simple, I have since migrated away from Cordova and to Capacitor, although I believe that the same effect can be achieved.

When the keyboard displays simply scroll to the bottom of the screen - it works for my use case (Chat message screen) but it might not be appropriate for all screens, for instance if they are very tall (height) however it could probably be used as a base for any page if you created a different @ViewChild() as an anchor point.

The one below I use in an instant chat messenger where the user should alway be pushed to the bottom of ion-content when typing a new message, showing only the very last message sent in the list.

import { ViewChild, AfterViewInit } from '@angular/core'
import { IonContent } from '@ionic/angular'

import { Plugins, KeyboardInfo } from '@capacitor/core';
const {  Keyboard } = Plugins;

    @ViewChild(IonContent, { static: true }) content: IonContent;

    ngAfterViewInit(){
        Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
            setTimeout( () =>  this.content.scrollToBottom(100), 200  )             
        });
        Keyboard.addListener('keyboardDidShow', (info: KeyboardInfo) => {
            setTimeout( () =>  this.content.scrollToBottom(100), 200  )  
        });        
    }

[jcmendes9898]

Almost 2020, and the problem persist

[vromaniv]

Almost 2020, and the problem persist

2020 already and the problem still persist 😅

[vovopap]

My experience with this issue was a little different:

1. On Android, it works fine
2. On ios, it works only after the first keyboard is hit. Otherwise, the input stays hidden under the keyboard. check the gif to get the picture

I confirmed all these with a blank ionic app created using the ionic start appName command.

[pdoreau]

Same issue on IOS. Any way to fix / workaround ?

[GiangNguyenDev]

Would be appreciated if there is fix/workaround for this problem.

[vadimwe]

Seems no, try to play with Keyboard.resizeMode()

[rjurado01]

I have better results on iOS with <preference name="KeyboardResizeMode" value="body" /> but not 100%.

[alimhanna1991]

  add

<preference name="resizeOnFullScreen" value="true" /> to config.xml in android

[DalterioRaffaele]

Ho risolto in questo modo in attesa che risolvano il bug sulle versioni successive del plugin Keyboard. 1) Ho rimosso il plugin keyboard => ionic cordova plugin remove cordova-plugin-ionic-keyboard --save 2) Sono passato alla versione del plugin keyboard 2.0.5 => ionic cordova plugin add cordova-plugin-ionic-keyboard@2.0.5 --save 3) Ho rimosso la platform ios => ionic cordova platform remove ios 4) Aggiunto di nuovo la platform ios => ionic cordova platform add ios Ora mi funziona correttamente, spero vi sia di aiuto.

[TdoubleG]

@mhartington @mlynch @manucorporat guys can you please give any feedback to this kind of bug? Still present in plugin version 2.2.0 and ionic 5...

[vadimwe]

No real working solution yet. I tested all replies...

Отправлено с iPhone

8 апр. 2020 г., в 19:47, TdoubleG notifications@github.com написал(а):

 @mhartington @mlynch @manucorporat guys can you please give any feedback to this kind of bug? Still present in plugin version 2.2.0 and ionic 5...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[rjurado01]

I have made a plugin that solve the issue on iOS (Android works fine for me): https://github.com/rjurado01/cordova-plugin-keyboard-scroll

I have tested it using wkwebkit and removing cordova-plugin-ionic-keyboard. It's so basic but you can try it.

[jffs]

any update?

[jwburnside]

  add

<preference name="resizeOnFullScreen" value="true" /> to config.xml in android

This is referenced in the keyboard plugin documentation as an Android fix (https://github.com/ionic-team/cordova-plugin-ionic-keyboard), but in my Ionic 5 app it had the side effect of misaligning content on pages that did not even have forms or inputs with which to display a keyboard. It also had issues shifting the header when the keyboard opens. I'll open a ticket with the author, but anyone who wants to add this fix to their config should check the rest of the content alignment in their app afterwards.

[kareemyousry]

this is solution workaround <ion-textarea [rows]="6" formControlName="name" (ionFocus)="scrollToInput($event)"> scrollToInput(event:any):void {

   event.srcElement.scrollIntoView({
    behavior: 'smooth'
   });

}

[tendaikatsande]

My solution to this problem was to add margin-botton equal to keyboard size on keyboard show and remove the margin when keyboard hide

// ts file
keyboardHeight = 0;

ngAfterViewInit() { Keyboard.addListener("keyboardWillShow", (info: KeyboardInfo) => { this.keyboardHeight = info.keyboardHeight; }); // Keyboard.addListener("keyboardDidShow", (info: KeyboardInfo) => { // this.keyboardHeight = info.keyboardHeight; // });

// Keyboard.addListener("keyboardDidHide", () => {
//   this.keyboardHeight = 0;
// });
Keyboard.addListener("keyboardWillHide", () => {
  this.keyboardHeight = 0;
});

}

<div [hidden]="view !== 'register'" class="register-container" [ngStyle]="{'margin-bottom': keyboardHeight+'px'}">

[syam38]

  add

<preference name="resizeOnFullScreen" value="true" /> to config.xml in android

This resolves the issue in android but it is hiding the app's footer below the navigator bar of the mobile

[denisson]

My workaround:

window.addEventListener('keyboardDidShow', function() {
  document.activeElement.scrollIntoView({behavior: 'smooth'});
});

But, I really hope this problem can be solved someday.

[qliqdev]

2021 Problem still exists

Ionic:

   Ionic CLI                     : 6.16.2
   Ionic Framework               : @ionic/angular 5.6.9
   @angular-devkit/build-angular : 12.0.3
   @angular-devkit/schematics    : 12.0.3
   @angular/cli                  : 12.0.3
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.0.1
   @capacitor/android : 3.0.1
   @capacitor/core    : 3.0.1
   @capacitor/ios     : 3.0.1

Any best workarounds founded by community?

[qliqdev]

This worked for me

app.component.ts

  Keyboard.addListener('keyboardWillShow', (info) => {
    document.body.classList.add('keyboard-is-open');
    document.documentElement.style.setProperty('--keyboard-height', - info.keyboardHeight + 'px');
  });
  Keyboard.addListener('keyboardDidShow', (info) => {
    document.activeElement.scrollIntoView({behavior: 'smooth'});
    document.documentElement.style.setProperty('--keyboard-height', - info.keyboardHeight + 'px');
  });

main.scss

.keyboard-is-open {
  ion-content.md {
    --offset-bottom: calc(var(--keyboard-height) + 50px) !important;
  }
}

[Pacjonek]

For some reason the --offset-bottom variable of the ion-content (from answer above) sometimes changes the scroll height in my project but sometimes not. I have no idea what the source of this problem is, whether it is a bug of Ionic or a problem with my project. Anyway, I found a workaround. It also changing the --offset-bottom but in other HTML element. Works for me on Android and the full screen (immersive) mode.

  const keyboardStyle = document.createElement('style');
  document.querySelector('head')!.appendChild(keyboardStyle);

  window.addEventListener('keyboardDidShow', async (e) => {
    keyboardStyle.innerHTML = `ion-content.md::part(scroll){
     /* 
       Might also need to add the height of a possible navigation bar if app works in immersive mode:
       https://stackoverflow.com/questions/47709732/detect-android-soft-navigation-bar-height-in-ionic-2 
      */
      --offset-bottom: -${e.keyboardHeight/* + navigationBarHeight*/}px
    }`;
    document.activeElement?.scrollIntoView({block: 'end'});
  });

  window.addEventListener('keyboardWillHide', () => {
    keyboardStyle.innerHTML = '';
  });

[jishnutv]

The simple way to fix this issue is by adding this to your capacitor.config.json or capacitor.config.ts file.

capacitor.config.json

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "resizeOnFullScreen": true
    }
  }
}

capacitor.config.ts

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: "body",
      resizeOnFullScreen: true,
    },
  },
};

If you are using cordova add the following to your config.xml file.

config.xml

<preference name="KeyboardResize" value="true" />
<preference name="resizeOnFullScreen" value="true" />

[csaar95]

The simple way to fix this issue is by adding this to your capacitor.config.json or capacitor.config.ts file.

capacitor.config.json

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "resizeOnFullScreen": true
    }
  }
}

capacitor.config.ts

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: "body",
      resizeOnFullScreen: true,
    },
  },
};

If you are using cordova add the following to your config.xml file.

config.xml

<preference name="KeyboardResize" value="true" />
<preference name="resizeOnFullScreen" value="true" />

Unfortunately not working for me. The only working (but ugly) workaround, ist this one of @denisson. I'm using the input inside a custom ion-popover.

[corysmc]

I solved this by using: ionic v6 (stenciljs)

setupConfig({
  scrollAssist: false,
});

Although scrollAssist is not documented - here's how you use setupConfig: v5: https://ionicframework.com/docs/v5/react/config Ionic react has a few changes on v6: https://ionicframework.com/docs/intro/upgrading-to-ionic-6#react you'll call setupIonicReact instead

Found on this issue: https://github.com/ionic-team/ionic-framework/issues/23664#issuecomment-1054277235

[junaidahmed501]

Almost 2023 & still, the problem still exists :(

[junaidahmed501]

Almost 2023 & still, the problem still exists :(

Finally, I have been able to resolve the issue. For anyone using Capacitor & facing this issue as of November, here's what worked for me.

Just install the capacitor Keyboard plugin, that's right, just install it without using it anywhere & the issue would be gone. Here's the link to the official plugin. https://capacitorjs.com/docs/apis/keyboard#install

I have tested it properly & I can confirm that it works for me. Let me know if anyone needs more info. There isn't any though but still, share your thoughts whether or not it worked for you.

[junaidahmed501]

I was facing the same issue in my ionic app (with Capacitor). I resolved the issue by just installing the Keyboard plugin. That's right, I didn't even have to use the plugin anywhere, I just had to install it & it did the trick.

I don't why it's like that but for me, it only works when I have the plugin installed even if I'm not using it to get different/custom behaviour.
Find the install command here: capacitorjs.com/docs/apis/keyboard#install

[BeataG]

Unfortunately, this problem appeared for me again for the latest Android 13, the plugin was already installed.

Has anyone else encountered this and knows how to fix it?

[nncl]

I had to configure the resize property as shown in the Capacitor plugin docs.

I was facing this issue on iOS though.

[gerciljunio]

@nncl here on android everything works ok, but on iOS I've tried everything and nothing solves it.

[elenche]

I had the same issue on iPad. Installing cordova-plugin-ionic-keyboard plugin version 2.2.0 and adding the following to config.xml solves the issue. The page is scrolled up a little when the keyboard opens, and goes back to its initial state after the keyboard closes.

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="body" />

[DarshGupta16]

Almost 2023 & still, the problem still exists :(

Finally, I have been able to resolve the issue. For anyone using Capacitor & facing this issue as of November, here's what worked for me.

Just install the capacitor Keyboard plugin, that's right, just install it without using it anywhere & the issue would be gone. Here's the link to the official plugin. https://capacitorjs.com/docs/apis/keyboard#install

I have tested it properly & I can confirm that it works for me. Let me know if anyone needs more info. There isn't any though but still, share your thoughts whether or not it worked for you.

@junaidahmed501 Can you share a copy of your code please? Like did you use ion-input or just a normal html one?

[Jefferson227]

For those who're using React, the workaround below worked fine for me. I've noticed my app already had installed @capacitor/core and @capacitor/keyboard, but none of the tips here in the comments worked for me.

These are the versions I'm using:

"@ionic/cli": "^7.1.1",
"@ionic/react": "^7.2.0",
"react": "^17.0.1",
"@capacitor/core": "3.5.1",
"@capacitor/keyboard": "1.2.2",

The workaround:

• Add import { useKeyboardState } from '@ionic/react-hooks/keyboard'; in the component that contains the content that is being hidden by the keyboard. You'll need to install @ionic/react-hooks. If you have any error messages related to compatibility, you can run the command npm install @ionic/react-hooks --legacy-peer-deps
• Within the declaration of your component, you can enter the following code:

  const { keyboardHeight } = useKeyboardState();
  window.scrollTo(0, keyboardHeight || 0);

Basically, every time the keyboard shows up, the content will be scrolled up. It worked fine on iOS and Android.