[v4 - iOS] ion-tab-bar reappearing when switching input focus
See original GitHub issueBug 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:
- Use the starter app with the latest WkWebView Plugin (3.x) - add multiple inputs (text) to a page.
- Build for iOS and run on iOS
- Select any input -->
keyboardWillShow
andkeyboardDidShow
will be properly triggered, the keyboard appears, and the tab bar disappears. - With the keyboard being still open, select another input (field). --> triggers
keyboardWillHide
andkeyboardDidHide
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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:14 (1 by maintainers)
Top Results From Across the Web
Ion-Tabs: Tab-Based Component for App Top-Level Navigation
Tabs are top-level components to implement tab-based navigation. Ion-tabs have no styling & work as router outlets for navigation that behaves like native ......
Read more >prevent first input focus in ionic - Stack Overflow
You can use tabindex attribute to direct the focus. Setting it to -1 will never auto focus.
Read more >Control focus with tabindex - web.dev
To focus an element, press the Tab key or call the element's focus() method. HTML; CSS. Result; Skip Results Iframe.
Read more >Tabindex Attribute - HTML5 Forms - Wufoo
<span tabindex="4"> This wouldn't normally receive focus</span> ... iOS 4+ ... with links, form controls and objects getting focus as they appear in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Update: This issue is still present in 4.2.0 and is a blocker for our app release after migrating to v4.
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.