Ionic-framework: [v4 - iOS] ion-tab-bar reappearing when switching input focus

[wilk-polarny]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
When using Tabs together with a tab bar, the tab bar properly hides when the keyboard openes for input. When switching to another input element while the keyboard is still open, the tab bar appears on top the the keyboard

Expected behavior:
The tab bar should stay hidden as long as the keyboard is open.

Steps to reproduce:

1. Use the starter app with the latest WkWebView Plugin (3.x) - add multiple inputs (text) to a page.
2. Build for iOS and run on iOS
3. Select any input --> keyboardWillShow and keyboardDidShow will be properly triggered, the keyboard appears, and the tab bar disappears.
4. With the keyboard being still open, select another input (field). --> triggers keyboardWillHide and keyboardDidHide and does not trigger the show and didShow events, thus letting the tab bar reappear on top of the keyboard (and messing around with view height calculations).

Other information:
As v3 and v4-beta did not automatically hide the tabs, we worked around this issue by hiding the bar manually (by listening to the Keyboard plugin events first). With v4-stable this seems to be done by the tabs itself - but it also seems to be partially broken

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 25.2.2 (/Users/xxx/Library/Android/sdk)
   NodeJS            : v8.12.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[wilk-polarny]

Update: This issue is still present in 4.2.0 and is a blocker for our app release after migrating to v4.

[tmk1991]

Agreed with @wilk-polarny - blocking issue

Current behavior:
When clicking between inputs on a page, the tab bar will randomly decide to show and hide above the keyboard.

Expected behavior:
control the behavior of the tab bar (ideally, don't show it at all).

[JohnnyWombwell]

Hi all

Is there a known workaround for this?

We have tried manually hiding the tab bar on keyboard events but the results are pretty ugly (flickering etc).

Thanks
John

Versions as follows:

Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)

[wilk-polarny]

@liamdebeasi https://www.youtube.com/watch?v=Mi57d50pCUw
:)

[liamdebeasi]

@wilk-polarny Ok, that made me laugh 😄

In terms of a workaround, you will likely want to make sure you move that input back up into the visible area so no scrolling is required. We are actively working on some keyboard fixes that will hopefully address this issue.

I will keep you posted!

[Spinnenzunge]

@liamdebeasi Can you also consider adding a class or something to the ion-app component so other components can be styled if keyboard is open (e.g. hide ion-footer)

[xiexin36]

Any update about this issue？

[VIMHaos]

This issue is still present - v4.6.0 ,(

[ThomasKi93]

Issue still present for v4.6.2

[neelz040]

Issue still present with v4.7.4

[wilk-polarny]

For magical reasons, the issue is gone for me with Ionic v4.9.0 and the latest ionic keyboard plugin.
I don't know what solved this. Upgrading to 4.9.0 with Angular 8, or the keyboard plugin (or both).

Can anyone confirm?

[VIMHaos]

@wilk-polarny thanks for information,
Yes it's resolved for us, by [email protected] and [email protected]
Angular version still is 7.2.15

[wilk-polarny]

@liamdebeasi , looks like this has been resolved by cordova-plugin-ionic-keyboard v2.2.0 ?
Closing.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.