CODEWITHSUNDEEP
androidangulartypescriptionic-frameworkionic3
Ionaru
Ionaru

Reputation: 1060

Why are the Ionic keyboard events not firing?

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.

Upvotes: 4

Views: 11206

Answers (3)

Ionaru
Ionaru

Reputation: 1060

Found an answer in https://github.com/ionic-team/ionic-native/issues/2306, it seems like the keyboard plugins are somewhat broken at the time of writing.

...
import { Observable } from 'rxjs'
import { Platform } from 'ionic-angular';

export class MyAppComponent {

    constructor(public platform: Platform) {
        this.platform.ready().then(() => {

            Observable.fromEvent(window, 'keyboardWillShow').subscribe(() => {
                console.log('Keyboard is now open');
            });
        });
    }
}

Credit to https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-372593829 for the solution that worked for me!

Upvotes: 1

Code Spy
Code Spy

Reputation: 9964

For Ionic 4 Keyboard Native Plugin try using addEventListener

window.addEventListener('keyboardWillShow', () => {
  console.log("Keyboard will Show");
});
window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is Shown");
});
window.addEventListener('keyboardWillHide', () => {
  console.log("Keyboard will Hide");
});
window.addEventListener('keyboardDidHide', () => {
  console.log("Keyboard is Hidden");
});

Check complete tutorial code here

Upvotes: 2

Berk Akkerman
Berk Akkerman

Reputation: 483

You can use keyboard events like below;

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

Upvotes: 8

Related Questions