Ionic-native: Keyboard Zone Issue

[danbucholtz]

If I do something like this:

import {Keyboard} from 'ionic-native';

window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardShowHandler(e){
      zone.run( () => {
        console.log('KEYBOAD SHOW');
        self.controlShowHide['cancelButton'] = true;
        console.log("keyboardShowHandler Value is: ", self.controlShowHide['cancelButton']);
      });

    }

I need to wrap the calls in the handler in an ngZone.run method call in order to get back in the Angular context correctly. This is affecting Ionic 2 users on Android.

Thanks,
Dan

[ihadeed]

Hey @danbucholtz

AFAIK the Angular change detection gets triggered when a promise resolves (or other events...). In the case of the keyboard plugin, the original plugin doesn't handle onSucess and onError, therefore we can't return a promise that resolves once the keyboard is shown/hidden (unless if we override the wrapper, but it won't be perfect since the promise may resolve too early).

What I suggest is to modify the functionality for ionic-plugin-keyboard and add onSucess and onError parameters. See here: https://github.com/driftyco/ionic-plugin-keyboard/blob/master/www/android/keyboard.js#L11-L25

I don't have experience writing Cordova plugins, but I can submit a PR for that if you want.

[ihadeed]

Sorry closed by accident.

[danbucholtz]

@tlancina, what do you think about this?

[ihadeed]

FYI @danbucholtz : https://github.com/driftyco/ionic-plugin-keyboard/pull/215

[danbucholtz]

Thanks @ihadeed, you are awesome! Let's still see what Tim thinks as he is the resident keyboard expert.

[ihadeed]

@danbucholtz I can see that :grin:

[tlancina]

Hey sorry gang, just saw this and I'm about to head out for the weekend. Talking to @ihadeed I think we can use the existing eventObservable option of the @Cordova decorator and then you would subscribe to those events instead.

[ihadeed]

Hey @danbucholtz ,

Sorry I just realized this now, but we already have event listeners implemented in the plugin definition.

Have a look here: https://github.com/driftyco/ionic-native/blob/master/src/plugins/keyboard.ts#L58-L76

So to rewrite your code, it would be something like this:

import {Keyboard} from 'ionic-native';

    Keyboard.onKeyboardShow().subscribe(()=> { 
        console.log('KEYBOAD SHOW');
        self.controlShowHide['cancelButton'] = true;
        console.log("keyboardShowHandler Value is: ", self.controlShowHide['cancelButton']);
    })