capacitor: Keyboard events not triggered

Description of the problem:

I need to get the keyboard height when the keyboard will show (documented here : https://capacitor.ionicframework.com/docs/apis/keyboard).

All keyboard events is not triggered with method Keyboard.addListener('keyboardWillShow', ...) but triggered with window.addEventListener('keyboardWillShow', ...).

Problem, window.addEventListener('keyboardWillShow', ...) do not send that informations …

Affected platform

Android
iOS
electron
web

OS of the development machine

Windows
macOS
linux

Other information:

Application build with vuecli 3.2.3

Capacitor version: 1.0.0-beta.22

node version: v11.2.0

npm version: 6.9.0

CocoaPods version: 1.6.1

Steps to reproduce:

import { Plugins, Capacitor } from "@capacitor/core";
const { Keyboard } = Plugins;

Keyboard.addListener("keyboardWillShow", function(e) {
    console.log(e); //not logged :(
});
window.addEventListener("keyboardWillShow", function(e) {
    console.log(e); //log {"isTrusted":false}
});

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 19 (8 by maintainers)

Most upvoted comments

@diadal I had the same problem, it seems like the native Capacitor addListener (or the code, which needs to be executed within it) runs outside the Angulars Zone. So we need to let the code run within the Angualars Zone again.

I’m setting a variables value to true or false, when the keyboard will show or hide.

My (shortened) code:

import { NgZone } from '@angular/core';

[...]

constructor(
   private ngZone: NgZone
) {}

[...]

private keyboardIsVisible: boolean = false;

[...]

public myInitFunction(): void {

    try {

        // Listen to `keyboardWillShow` event
        Keyboard.addListener('keyboardWillShow', () => {

            this.ngZone.run(() => {
                this.keyboardIsVisible = true;
            });

        });

        // Listen to `keyboardWillHide` event
        Keyboard.addListener('keyboardWillHide', () => {

            this.ngZone.run(() => {
                this.keyboardIsVisible = false;
            });

        });
        
    } catch (error) {
        
        // Error
        console.error(error);

    } finally {

        // Return
        return;

    }

}

[...]

Could this may be a general bug, when using Ionic 4 / 5 with Capactior(s native Bridge)?

Hope it helps.

Cheers Unkn0wn0x

Unkn0wn0x on Apr 18, 2020

@solojuve1897 as you are using the window event, be aware that on next release the keyboardHeight will be in the event directly instead of being on the event details, there won’t be details anymore. This is for better Cordova compatibility.

But I would recommend using the new events that can be consumed from the plugin directly instead of using the window events.

jcesarmobile on May 16, 2019