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...

[parasyris]

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.

ionic-team/cordova-plugin-ionic-keyboard#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);

[parasyris]

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

[parasyris]

@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 ionic-plugin-keyboard@2.2.1
npm install --save @ionic-native/keyboard@4.11.0

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