Ionic-native: The keyboard module doesn't seem to work with cordova-plugin-ionic-keyboard

[danielcrk]

I'm submitting a ...
[X] bug report
[ ] feature request
[ ] support request

Current behavior:
The module seems to be targeting ionic-plugin-keyboard which is deprecated, and doesn't seem to be working properly with the cordova-plugin-ionic-keyboard plugin.
For example, the onKeyboardHide() observable is never updated.

[sfaizanh]

Hope it helps

import { Injectable } from '@angular/core';
import { Cordova, CordovaProperty, IonicNativePlugin, Plugin } from '@ionic-native/core';
import { Observable } from 'rxjs/Observable';

/**
 * @name IonicKeyboard
 * @description
 * @usage
 * ```typescript
 * import { IonicKeyboard } from '@ionic-native/ionic-keyboard';
 *
 * constructor(private keyboard: IonicKeyboard) { }
 *
 * ...
 *
 * this.keyboard.show();
 *
 * this.keyboard.close();
 *
 * ```
 */
@Plugin({
    pluginName: 'IonicKeyboard',
    plugin: 'cordova-plugin-ionic-keyboard',
    pluginRef: 'window.keyboard',
    repo: 'https://github.com/ionic-team/cordova-plugin-ionic-keyboard',
    platforms: ['Android', 'iOS']
})
@Injectable()
export class IonicKeyboard extends IonicNativePlugin {

    /**
     * Hide the keyboard accessory bar with the next, previous and done buttons.
     * @param hide {boolean}
     */
    @Cordova({ sync: true })
    hideFormAccessoryBar(hide: boolean, successCallback: () => any): void { }

    /**
     * Force keyboard to be shown.
     */
    @Cordova({
        sync: true,
        platforms: ['iOS', 'Android']
    })
    show(): void { }

    /**
     * Hide the keyboard if open.
     */
    @Cordova({
        sync: true,
        platforms: ['iOS', 'Android']
    })
    hide(): void { }

    /** Keyboard is visible or not. */
    @CordovaProperty
    isVisible: boolean;

    /**
     * Creates an observable that notifies you when the keyboard is hidden. Unsubscribe to observable to cancel event watch.
     * @returns {Observable<any>}
     */
    @Cordova({
        eventObservable: true,
        event: 'keyboardDidHide',
        platforms: ['iOS', 'Android']
    })
    keyboardDidHide(): Observable<any> { return; }

    /**
     * Creates an observable that notifies you when the keyboard is shown. Unsubscribe to observable to cancel event watch.
     * @returns {Observable<any>}
     */
    @Cordova({
        eventObservable: true,
        event: 'keyboardDidShow',
        platforms: ['iOS', 'Android']
    })
    keyboardDidShow(): Observable<any> { return; }

    /**
     * Creates an observable that notifies you when the keyboard will show. Unsubscribe to observable to cancel event watch.
     * @returns {Observable<any>}
     */
    @Cordova({
        eventObservable: true,
        event: 'keyboardWillShow',
        platforms: ['iOS', 'Android']
    })
    keyboardWillShow(): Observable<any> { return; }

    /**
     * Creates an observable that notifies you when the keyboard will hide. Unsubscribe to observable to cancel event watch.
     * @returns {Observable<any>}
     */
    @Cordova({
        eventObservable: true,
        event: 'keyboardWillHide',
        platforms: ['iOS', 'Android']
    })
    keyboardWillHide(): Observable<any> { return; }

}

Edited: Observable doesn't seems to work

[webheadnz]

Same problem.
How do you add the ionic-keyboard to @ionic-native ?

npm install --save @ionic-native/ionic-keyboard
npm ERR! code E404
npm ERR! 404 Not Found: @ionic-native/ionic-keyboard@latest

[spacepope]

Wow, that's really driving me crazy.
Ionic Documentation on Native/Keyboard is pointing to repo https://github.com/ionic-team/ionic-plugin-keyboard which states to be deprecated and points to https://github.com/ionic-team/cordova-plugin-ionic-keyboard instead.

Not only this "new" plugin cannot be accessed via @ionic-native/keyboard package (because this is still entirely tailored to the old plugin), but also discards support for Windows and Blackberry platforms!

I solved this temporarily by uninstalling @ionic-native/keyboard and using declare var Keyboard; without typescript defs..

@sfaizanh already did a PR on this?

Ionic-Team, you cannot state a plugin as deprecated and not update your native packages! 😠

[sjdrew]

Me too wasted alot of time on this.

[edmundo096]

@spacepope Right, just got into the same point.
Tried to open a issue on cordova-plugin-ionic-keyboard but couldn't, probably because it's a fork.
Will try @sfaizanh workaround, hopefully won't break anything.

@mhartington sorry to mention you, but this may be noted or mentioned somewhere while the keyboard native module is updated or a new one is created.

[sfaizanh]

Hi @edmundo096 @sjdrew @spacepope Observable doesn't seems to work, But i can tell you what is the way around.

declare var window;

import { Observable, Subscription } from 'rxjs';
import { get } from 'lodash';

export class ExamplePage {

    private keybaordShowSub: Subscription;
    private keyboardHideSub: Subscription;

    constructor() {}

    ionViewWillEnter() {
        this.addKeyboardListeners();
    }

    ionViewWillLeave() {
        this.removeKeyboardListeners();
    }

    private addKeyboardListeners() {
        this.keybaordShowSub = Observable.fromEvent(window, 'keyboardWillShow').subscribe(e => {
            // Code here
        });

        this.keyboardHideSub = Observable.fromEvent(window, 'keyboardWillHide').subscribe(e => {
            // Code here
        });
    }

    private removeKeyboardListeners() {
        if (this.keybaordShowSub) this.keybaordShowSub.unsubscribe();
        if (this.keyboardHideSub) this.keyboardHideSub.unsubscribe();
    }

    // When Keyboard is open, if user clicks/taps on button it will open the second page. To cancel that i have to check if keyboard is open then close keyboard only.
    openSecondPage(ev) {
        ev.stopPropagation();
        if (!get(window, 'Keyboard.isVisible', false)) {
            const newRootNav = <NavController>this.app.getRootNavById('n4');
            newRootNav.push('SecondPage');
        }
    }
}

[mindhells]

The problem is this:

<js-module src="www/android/keyboard.js" name="keyboard"> <clobbers target="cordova.plugins.Keyboard" /> </js-module>

changed to this:

<js-module src="www/ios/keyboard.js" name="keyboard"> <clobbers target="window.Keyboard"/> </js-module>

in the plugin config.xml. While the plugin wrapper config remains the same.

For the time being @sfaizanh proposal is a good workaround for me.

[sfaizanh]

Thanks

[fishgrind]

same problem here.. thanks for the workaround

[noxiousmobile]

This is not good at all...

[gparasyris]

Could someone from the ionic team reply to this?
Is someone working on this issue at the moment?

[mhartington]

Woooah, sorry about this! Some how it must have slipped through.

https://github.com/ionic-team/cordova-plugin-ionic-keyboard/issues/9

This is being update. For now you can use the raw, JS API without needing ionic native.

https://github.com/ionic-team/cordova-plugin-ionic-keyboard#methods

[plindsay]

thanks @mhartington If we use the raw JS API for now, how do we reference 'Keyboard' in our code?

Do we need to add declare var cordova: any; just after our imports, and then cordova.plugins.Keyboard in our class?

[fishgrind]

@plindsay

declare var Keyboard: any;

and calling it after that:

Keyboard.hide();

[ghost]

For enabling the accessory bar:

declare const Keyboard: any;
Keyboard.hideFormAccessoryBar(false);

[gparasyris]

Is there any way to successfully listen to the keyboardWillShow/Hide events?

[fishgrind]

@gparasyris yup, check out the readme: https://github.com/ionic-team/cordova-plugin-ionic-keyboard#keyboardwillshow

[gparasyris]

@fishgrind Yes, thanks but I'd already tried those.

Amazingly enough, 'native.keyboardhide', 'native.keyboardshow' worked for me.

[jayzyaj]

I tried everything I can but I want to hide the accessory bar that is set to true but it's not working. Anyone?

[noxiousmobile]

I would stay away from everything except:
"ionic-plugin-keyboard": "^2.2.1",
and
"@ionic-native/keyboard": "^4.11.0",

and use all the native functionalities provided from the ionic official doc's.

[kwanite]

Thank you @noxiousmobile for sharing these versions. I installed and used the plugin to close the keyboard and it works. These older versions seem to be the way to go for now.

I removed the latest versions first and then added:

ionic cordova plugin add [email protected]
npm install --save @ionic-native/[email protected]

And followed the official Ionic documents to import and use the plugins.

@noxiousmobile, this was a great help!

[ReaperTech]

@mhartington I am still using the raw js api to show the form accessory bar in my ionic 4.0.2 app, as you suggested.
ie
cordova plugin add cordova-plugin-ionic-keyboard --save
declare var: Keyboard; in the AppComponent.js

Is there now a better official way to do it?

I get an error with this method: "TypeError: Keyboard.hideFormAccessoryBar is not a function"

[gnesher]

So, this bug is now 2 years old, has anyone from the core team looked into this? It's really simple to solve by dropping the @cordova decorator I'm just guessing this isn't what you're looking for

[larsblumberg]

With

"@ionic-native/keyboard": "5.29.0"
"cordova-plugin-ionic-keyboard": "2.2.0"

this combination works for me:

import {Keyboard} from '@ionic-native/keyboard'
import {Plugins} from '@capacitor/core'

// Use Keyboard.onKeyboard[Will|Did][Show|Hide]() events from Keyboard:
Keyboard.onKeyboardWillShow().subscribe(...) // All show/hide events are fired properly

// Use Plugins.Keyboard instead to configure the keyboard:
Plugins.Keyboard.setResizeMode('native') // Keyboard.setResizeMode(...) doesn't work, it raises an error