bug: iOS Tablet: ion-tab-bar Remains Hidden After Keyboard Dismissal Following Device Orientation Change

[AdrienJacquard]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

On iOS tablets or xCode Emulator equivalent, when an ion-textarea is focused inside a tab page, the keyboard correctly hides the ion-tab-bar as expected. However, if the device orientation is changed (e.g., from portrait to landscape) after this interaction, then the next time the ion-textarea is focused and subsequently loses focus, the keyboard will keep the ion-tab-bar hidden.

Video for reference:

Simulator.Screen.Recording.-.iPad.7th.gen.2019.-.2024-02-26.at.17.14.14.mp4

On the video above after typing "Exemple 3" and losing focus, keyboard is dismissing but we can see that the ion-tab-bar stay hidden. And it only get resolve when changing device orientation again.

Expected Behavior

After focusing on the ion-textarea and the keyboard appears, then dismissing the keyboard, the ion-tab-bar should reappear regardless of any prior changes in device orientation. The tab-bar-hidden class should be removed from the ion-tab-bar automatically when the keyboard is dismissed, ensuring the tab bar is visible to the user.

Steps to Reproduce

1. Build and open the project attached on an iOS tablet or xCode emulator equivalent and navigate to first tab page containing an ion-textarea.
2. Tap on the ion-textarea to focus and bring up the keyboard, observing that the ion-tab-bar is hidden as expected.
3. Lose focus of that input observing that the ion-tab-bar is now shown back as expected.
4. Change the device orientation (e.g., from portrait to landscape or vice versa).
5. Focus on the ion-textarea again to bring up the keyboard and then dismiss it by losing focus on the ion-textarea.
6. Observe that the ion-tab-bar remains hidden, with the tab-bar-hidden class not being removed.

Code Reproduction URL

https://github.com/AdrienJacquard/ionic-ion-tab-bar-hidden-issue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/adrienjacquard/.nvm/versions/node/v20.11.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.7.3
@angular-devkit/build-angular : 17.2.1
@angular-devkit/schematics : 17.2.1
@angular/cli : 17.2.1
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.0
@capacitor/android : not installed
@capacitor/core : 5.7.0
@capacitor/ios : 5.7.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.11.1 (/Users/adrienjacquard/.nvm/versions/node/v20.11.1/bin/node)
npm : 10.4.0
OS : macOS Unknown

Additional Information

Hints: Debugging revealed that the issue with ion-tab-bar not reappearing might be linked to a recent update (#27417) affecting the connectedCallback method. Specifically, the await waitForResize; line seems to halt further execution under certain conditions, such as after changing device orientation, preventing the render method from being called again.

If I remove the code changes from the PR #27417 editing the node_modules, then it works as expected

[mapsandapps]

Hi, thank you for submitting this bug! It looks like this is a duplicate of #28564, so I'll close this issue in favor of that one.

[ionitron-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.