Ionic-native: @ionic-native/keyboard

[empty-god]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
Android Build: Using the Ionic Keyboard package and plugin, subscribing to OnKeyboardWillShow or OnKeyboard will not subscribe and will return "TypeError: Invalid Event Target". I tried several life-cycle methods. None actually subscribed correctly.

Expected behavior:
You should be able to subscribe and run code on Keyboard toggle.

Steps to reproduce:

1. Add Keyboard packages to project as in docs.
2. Pull in keyboard using DI.
3. In ngAfterViewInit add the below code:

this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        console.log('show');
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        console.log('hide');
      });
});

1. Build and run and you will receive two "TypeError: Invalid Event Target" messages. App will still function.

Related code:
What I used as a workaround:

```
private keyboardShowSub: Subscription;

this.keyboardShowSub = fromEvent(window, 'keyboardWillShow').subscribe(() => {
  this.hideFooter = true;
});
this.keyboardHideSub = fromEvent(window, 'keyboardWillHide').subscribe(() => {
  this.hideFooter = false;
});

```

This shows that the actual event is firing, but there is an issue in the Observable wrapper.

Other information:
https://github.com/ionic-team/ionic-native/issues/2306

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

ionic (Ionic CLI) : 4.0.3 (C:\Users\aaleksandrov\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.1.2
@angular-devkit/core : 7.1.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.2.1
@ionic/ng-toolkit : not installed
@ionic/schematics-angular : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4

System:

Android SDK Tools : 26.1.1
NodeJS : v10.0.0 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

Environment:

ANDROID_HOME : C:\Users\aaleksandrov\AppData\Local\Android\Sdk

[ambrzz]

same here!

[Ans0n-Ti0]

Hi @empty-god,

It happens for battery status native API too.
I used your workaround and it works nicely for now.

Thanks

[georgechr]

It's because the internals of ionic-native have changed and if a target is not defined then the boolean 'true' is used instead of the window global

[waileong]

Any estimated timeline from Ionic Team?

[netsesame2]

Find the same issue.
Workaround:
window.addEventListener('keyboardWillShow', (e) => { }); window.addEventListener('keyboardWillHide', (e) => { });

[alexsoyes]

As @netsesame2 says, we must now use the window code as shown in the documentation.

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

I think on that both onKeyboardShow() and onKeyboardHide() will soon be removed from Keyboard package.

[dansiemens]

@Dinath not likely. This is a bug with the Observables provided by the npm package, not an intentional deprecation of features.

[bharanitt]

It happens for battery status native API too.

yes in ionic v4 also same problem for Battery status plugin! if you find any solution please let me know

[RafaelKr]

The mentioned workaround in the first post should also work for the Battery status plugin:

fromEvent(window, 'batterystatus').subscribe((status) => {
  console.log(status)
});

[Domvel]

Ok there is no target element set on the cordova decorator of some plugins like BatteryStatus. Example see here.

But the cordova decorator which pass the argument through the wrap method and then the wrapEventObservable method uses a default value.

function wrapEventObservable(event: string, element: any): Observable<any> {
  element = (typeof window !== 'undefined' && element) ? get(window, element) : element || typeof window !== 'undefined' || {};
  return fromEvent(element, event);
}

It should be the window. But it's true.
See demo

Because of:

typeof window !== 'undefined'

it should be:

window

or, if there is a case of using Ionic native without browsers enviroment and no window object:

typeof window !== 'undefined' ? window : {}

Because the || operation will automatically evaluate it as false if not present.
I make a pull-request....

[Domvel]

@danielsogl @kensodemann I fixed it. Please 🙏, could you merge it and release it as soon as possible? 🙂 (core) Maybe also to branch 5.13.x
Fixed demo