cordova-plugin-native-keyboard icon indicating copy to clipboard operation
cordova-plugin-native-keyboard copied to clipboard

iOS UI Glitch

Open louisfbuys opened this issue 8 years ago • 8 comments

I've been experiencing issues on ionic2 on iOS (Works great on Android).

When trying to hide the keyboard during a view change. The next view doesn't properly render in the space where the keyboard used to be (White bar at the bottom) and all the actual links are no longer inline with their UI elements (See screenshot). So to click on an element you need to click just below or just above it.

I've tried playing around with running the hide keyboard in different life cycle hooks (ionViewWillLeave, ionViewDidLeave etc...) and the behaviour gets slightly better or worse but nothing solves the issue.

Great plugin though! Already worlds better than anything we have tried!

img_7690

louisfbuys avatar Feb 13 '17 14:02 louisfbuys

Hmm, let's fix that! Do you have a repo reproducing this issue which I can clone perhaps? Or if not, perhaps you can mail me the platforms/ios folder so I can reproduce it without too much hassle?

EddyVerbruggen avatar Feb 13 '17 18:02 EddyVerbruggen

I'm having a similar issue on iOS. After leaving a view where keyboard was shown it moves my header down by the height of statusbar.

How it should look like: obraz

How it looks like: obraz

I'll provide soon a repo reproducing this issue.

Edit: There you go: https://github.com/qbix0r/keyboard-issue After adding ios platform you can open it in xcode. Let me know if you have any issues running it.

The glitch doesn't occur everytime, so try entering the chat page and leaving it few times (you can notice, that header jumps everytime tho).

qbix0r avatar Feb 15 '17 12:02 qbix0r

I had a similar problem using Ionic where the app viewport was being pushed up underneath the statusbar and leaving a gap at the bottom which was the height of the statusbar. I think what was happening is that Ionic was calculating the height of the app viewport as (total screen height) - (height of status bar). And then this plugin possibly adjusted the app viewport and moved the very top of it to the top of the screen (which is under the statusbar). I fixed it by using the cordova statusbar plugin and setting:

StatusBar.overlaysWebView(true);

pmurpmur avatar Feb 18 '17 01:02 pmurpmur

Hi, Can you guys post your code please how you handle property autoscrollElement with ionic 2? my last message won't scroll up if keyboard will open many thanks :)

msio avatar Feb 23 '17 00:02 msio

First of all @EddyVerbruggen thanks for this awesome plugin. I am having the same issue like @louisfbuys .

ezgif com-add-text

In the video I am entering the messengerview via click on the two chatbubbles in the header. When done with writing I dismiss the page via the Back-Button in the header and there you see the tabs pushed up and stay like that. The tabs do not get down after some time (like in the video) it's just the start of the gif again.

hartherbert avatar Jul 27 '17 14:07 hartherbert

I probably know how I get the error. When I enter the ChatPage, I setup the messenger via

this.nativeKeyboard.showMessenger(options);

And before I leave the page I hide the messenger via

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

And when I reenter the page and re-setup the messenger via the same method like above, the messenger doesn't work anymore, meaning that the onSubmit method dont get triggered or does not return the text of the input.

Else: everytime I start the plugin via the showMessenger(options) method, xcode returns this logs:

2017-07-27 17:52:22.854206+0200 MyApp[9939:3183051] THREAD WARNING: ['NativeKeyboard'] took '48.441162' ms. Plugin should use a background thread.

hartherbert avatar Jul 27 '17 15:07 hartherbert

@pmurpmur How/where did you implement your fix? I put it in the ionViewDidEnter in the page that navigates to my chat page, but the white bar still shows up when I go back to it.

aapiane09 avatar Sep 04 '17 00:09 aapiane09

@louisfbuys did your solve this issue?

erikramalho avatar Sep 12 '17 16:09 erikramalho