bug: footer safe area padding applied with nested tabs

[EinfachHans]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Some time ago it was introduced to remove the bottom padding of the safe area on footer toolbar when the keyboard is open or it is in bottom-tabs (#25746), which is 100% correct, but i found a bug in a special case.

Let's say you have two tabs, the first one has another tabs on the top, the second one has a footer where the correct style should be applied. It seems like the const tabs = this.el.closest('ion-tabs'); in the second tab is returning the inner tabs of the first tab page and don't apply the styles then because it has a slot top

Expected Behavior

The footer-toolbar-padding should not be applied. It should check the correct tabs and not the inner tabs of another outer tab

Steps to Reproduce

See attached repo:

1. ionic serve
2. Tab 1 is loaded
3. Go to tab 2 (The custom applied --ion-safe-area-bottom) is added while it should not

Code Reproduction URL

https://github.com/EinfachHans/ionic-footer-bug

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/hans/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.2.6
@angular-devkit/build-angular : 14.2.2
@angular-devkit/schematics : 14.2.2
@angular/cli : 14.2.2
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res (update available: 0.15.4) : 0.15.1
native-run : 1.7.0

System:

NodeJS : v16.14.2 (/Users/hans/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.6.0
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks, I can reproduce this. Changing this selector to :scope > ion-tab-bar should fix the issue:

ionic-framework/core/src/components/footer/footer.tsx

Line 115 in c87edf5

const tabBar = tabs?.querySelector('ion-tab-bar');

This will ensure that it only gets the tab bar that is a direct child of ion-tabs. One downside is if you are wrapping ion-tab-bar, this selector will not work. We could also do something like ion-tab-bar:not(ion-tabs ion-tabs ion-tab-bar) but that selector is slightly more complex.

[liamdebeasi]

Here is a dev build with the proposed fix: 6.2.7-dev.11662993429.13e5fb94

[EinfachHans]

works 😊

[liamdebeasi]

Thanks for the issue. This has been resolved via #25921, and a fix will be available in an upcoming release of Ionic Framework.

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