Why are the Ionic keyboard events not firing?

Issue

I’m trying to execute some code when the keyboard pops up and when it hides. I’ve placed it in the main MyAppComponent because I want the code to execute on any app page, but for some reason none of the keyboard events are working. What am I doing wrong?

...
import { Keyboard, Platform } from 'ionic-angular';

export class MyAppComponent {

    constructor(public platform: Platform, public keyboard: Keyboard) {
        this.platform.ready().then(() > {

            this.keyboard.didShow.subscribe(() > {
                // This is never executed...
                console.log('Keyboard is now open');
            });
        });
    }
}

I’ve tried using onKeyboardShow from ionic-native, but that did not execute its code either.

...
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';

export class MyAppComponent {

    constructor(public platform: Platform, public keyboard: Keyboard) {
        this.platform.ready().then(() > {

            this.keyboard.onKeyboardShow().subscribe(() > {
                // This is never executed...
                console.log('Keyboard is now open');
            });
        });
    }
}

Ionic info dump:

cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 8.0.0 

local packages:
    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    Node              : v9.11.1
    npm               : 5.8.0 
    OS                : Linux 4.13

The cordova-plugin-ionic-keyboard plugin (version 2.0.5) is installed, added to the appModule and present in config.xml

I’m testing the app on a Samsung Galaxy S6 with Android 7.0, it uses the default Samsung keyboard.

Solution

You can use keyboard events like below;

  window.addEventListener('keyboardWillShow', (e) > {}); 
  window.addEventListener('keyboardWillHide', () > {});
  window.addEventListener('keyboardDidShow', (e) > {}); 
  window.addEventListener('keyboardDidHide', () > {});

Answered By – Berk Akkerman

Leave a Comment