WKWebView iOS Header UI Glitch

[hartherbert]

Hey @EddyVerbruggen I wanted to say thanks to the awesome plugin you wrote!

It works great with WKWebView on my app. The only thing I noticed since I started to use WKWebView is that when I open the native-keyboard and close it (by clicking the view) the header is pulled up by the space the inputfield down under needs. To demonstrate you that I added two buttons in the View

Arrow-Down-Button to hide the native-keyboard only using

hideNativeKeyboard(){
    let options:NativeKeyboardOptions= <NativeKeyboardOptions>{};
    options.animated = false;
    this.nativeKeyboard.hideMessenger(options);
  }

Arrow-Up-Button to show the keyboard again using

let options:NativeKeyboardOptions = {
        onSubmit: this.sendMessage,
        showKeyboard: false,
        type: "twitter",
        appearance: "light",
        secure: false,
        scrollToBottomAfterMessengerShows: true,
        autoscrollElement: this.content.getScrollElement(),
        keepOpenAfterSubmit: true,
        animated: true,
        text: "",
        placeholder: 'Schreib eine Nachricht',
        placeholderColor: "#DDDDDD",
        textViewBackgroundColor: "#FFFFFF",
        backgroundColor: "#F6F6F6",
        textViewBorderColor: "#F6F6F6",
        maxChars: 0,
        counterStyle: 'none',
        textColor: '#555555',
        leftButton: {
          ...
        },
        rightButton: {
          ...
        }
      };
      this.nativeKeyboard.showMessenger(options);

In action, it looks like this:

In the video you see that when I open up the keyboard to type something and it than closes, the header is cutted. And when I hide the keyboard, the header is totally normal again. this is only happening since I installed the Cordova-Plugin-WKWebView-Engine from the Ionic-Team
I don't really know what is going wrong here but for me it seems like the native input-field is pushing up the whole "screen" or Webview.

Any suggestions?

[FredeHo]

Hi Harty,

give this a try:

import { Keyboard } from '@ionic-native/keyboard'; // Yes, keyboard - not native-keyboard

constructor(private keyboard: Keyboard) {
     if (this.platform.is('ios')) {
      this.keyboard.disableScroll(true);
    }
}

Hope this helps

[osterland]

so does it work? your welcome buddy ... welcome.

[hartherbert]

Yeah it works, I'm sorry for just closing the issue without saying a thing.
The header did not disappear anymore and It works great! thanks to @FredeHo

[FredeHo]

Glad it worked :)

[idroxid]

Hi @FredeHo ,
I had the same issue, and used your solution and it fixed the header problem.
But it seems that the "autoscrollElement" is not working anymore.
The keyboard overlaps the list of messages.

@hartherbert do you had the same problem ?

Many thanks for your help.

[jeffreyramia]

This is not working for me. The header still goes upwards on iPhone X.
import { Keyboard } from '@ionic-native/keyboard'; <- this is not recommended by the ionic team. This still references this archived plugin: https://github.com/ionic-team/ionic-plugin-keyboard.

The recommended keyboard plugin by the ionic team is now: https://github.com/ionic-team/cordova-plugin-ionic-keyboard which does not have this.keyboard.disableScroll(true);.

I tried using '' from the new plugin. This does not work as well... @EddyVerbruggen Since this is a paid plugin, shouldn't we get some sort of support?

Thanks.

[gregavola]

@jeffreyramia This worked for me if it helps: #73 (comment)

[geekmindztej]

@hobbydevs which plugin you have used?