fix(footer): Remove Toolbar padding if in Tabs (bottom) or Keyboard opened

core/src/components/footer/footer.scss

@@ -14,6 +14,6 @@ ion-footer {
   z-index: $z-index-toolbar;
 }
 
-ion-footer ion-toolbar:last-of-type {
+ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
-}
+}

core/src/components/footer/footer.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
@@ -20,6 +20,11 @@ export class Footer implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private contentScrollCallback: any;
 
+  private keyboardWillShowHandler?: () => void;
+  private keyboardWillHideHandler?: () => void;
+
+  @State() keyboardVisible = false;
+
   @Element() el!: HTMLIonFooterElement;
 
   /**
@@ -46,6 +51,30 @@ export class Footer implements ComponentInterface {
     this.checkCollapsibleFooter();
   }
 
+  connectedCallback() {
+    if (typeof (window as any) !== 'undefined') {
+      this.keyboardWillShowHandler = () => {
+        this.keyboardVisible = true;
+      };
+
+      this.keyboardWillHideHandler = () => {
+        setTimeout(() => (this.keyboardVisible = false), 50);
+      };
+
+      window.addEventListener('keyboardWillShow', this.keyboardWillShowHandler!);
+      window.addEventListener('keyboardWillHide', this.keyboardWillHideHandler!);
+    }
+  }
+
+  disconnectedCallback() {
+    if (typeof (window as any) !== 'undefined' && !this.keyboardWillShowHandler) {
+      window.removeEventListener('keyboardWillShow', this.keyboardWillShowHandler!);
+      window.removeEventListener('keyboardWillHide', this.keyboardWillHideHandler!);
+
+      this.keyboardWillShowHandler = this.keyboardWillHideHandler = undefined;
+    }
+  }
+
   private checkCollapsibleFooter = () => {
     const mode = getIonMode(this);
     if (mode !== 'ios') {
@@ -94,6 +123,8 @@ export class Footer implements ComponentInterface {
   render() {
     const { translucent, collapse } = this;
     const mode = getIonMode(this);
+    const tabs = this.el.closest('ion-tabs');
+    const tabBar = tabs ? tabs.querySelector('ion-tab-bar') : null;
     return (
       <Host
         role="contentinfo"
@@ -105,6 +136,7 @@ export class Footer implements ComponentInterface {
 
           [`footer-translucent`]: translucent,
           [`footer-translucent-${mode}`]: translucent,
+          ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot === 'top'),
 
           [`footer-collapse-${collapse}`]: collapse !== undefined,
         }}