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 ([email protected])
   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 [email protected] --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 [email protected] написал(а):

 @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;
});

}

[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