fix(modal): move footer instead of copy for sheet expandToScroll

core/src/components/modal/animations/ios.enter.ts

@@ -74,13 +74,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
       const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
       if (ionFooter && !ionFooterAlreadyAppended) {
         const footerHeight = ionFooter.clientHeight;
-        const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
 
-        baseEl.shadowRoot!.appendChild(clonedFooter);
-        ionFooter.style.setProperty('display', 'none');
-        ionFooter.setAttribute('aria-hidden', 'true');
+        // Move the footer to be a direct child of the baseEl.
+        baseEl.shadowRoot!.appendChild(ionFooter);
 
-        // Padding is added to prevent some content from being hidden.
+        // Padding is added to prevent content from being hidden at the bottom.
         const page = baseEl.querySelector('.ion-page') as HTMLElement;
         page.style.setProperty('padding-bottom', `${footerHeight}px`);
       }

core/src/components/modal/animations/ios.leave.ts

@@ -39,25 +39,36 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
         return;
       }
 
+      const children = Array.from(baseEl.children);
+      children.forEach((child) => {
+        console.log('child', child);
+        if (child.hasAttribute('slot')) {
+          console.log('child slot', child);
+          // get ionPage from the baseEl.children based on `.ion-page`
+          const ionPage = baseEl.querySelector('.ion-page') as HTMLElement;
+          ionPage.appendChild(child);
+        }
+      });
+
       /**
        * If expandToScroll is disabled, we need to swap
        * the visibility to the original, so the footer
        * dismisses with the modal and doesn't stay
        * until the modal is removed from the DOM.
        */
-      const ionFooter = baseEl.querySelector('ion-footer');
-      if (ionFooter) {
-        const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
+      // const ionFooter = baseEl.querySelector('ion-footer');
+      // if (ionFooter) {
+      //   const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
 
-        ionFooter.style.removeProperty('display');
-        ionFooter.removeAttribute('aria-hidden');
+      //   ionFooter.style.removeProperty('display');
+      //   ionFooter.removeAttribute('aria-hidden');
 
-        clonedFooter.style.setProperty('display', 'none');
-        clonedFooter.setAttribute('aria-hidden', 'true');
+      //   clonedFooter.style.setProperty('display', 'none');
+      //   clonedFooter.setAttribute('aria-hidden', 'true');
 
-        const page = baseEl.querySelector('.ion-page') as HTMLElement;
-        page.style.removeProperty('padding-bottom');
-      }
+      //   const page = baseEl.querySelector('.ion-page') as HTMLElement;
+      //   page.style.removeProperty('padding-bottom');
+      // }
     });
 
   if (presentingEl) {

core/src/components/modal/animations/md.enter.ts

@@ -74,15 +74,14 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
        * the footer twice.
        */
       const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
+
       if (ionFooter && !ionFooterAlreadyAppended) {
         const footerHeight = ionFooter.clientHeight;
-        const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
 
-        baseEl.shadowRoot!.appendChild(clonedFooter);
-        ionFooter.style.setProperty('display', 'none');
-        ionFooter.setAttribute('aria-hidden', 'true');
+        // Move the footer to be a direct child of the baseEl.
+        baseEl.shadowRoot!.appendChild(ionFooter);
 
-        // Padding is added to prevent some content from being hidden.
+        // Padding is added to prevent content from being hidden at the bottom.
         const page = baseEl.querySelector('.ion-page') as HTMLElement;
         page.style.setProperty('padding-bottom', `${footerHeight}px`);
       }

core/src/components/modal/animations/md.leave.ts

@@ -47,16 +47,12 @@ export const mdLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
        */
       const ionFooter = baseEl.querySelector('ion-footer');
       if (ionFooter) {
-        const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
+        // Move the footer back to `.ion-page` so it can be dismissed
+        // with the modal.
+        const ionPage = baseEl.querySelector('.ion-page') as HTMLElement;
+        ionPage.appendChild(ionFooter);
 
-        ionFooter.style.removeProperty('display');
-        ionFooter.removeAttribute('aria-hidden');
-
-        clonedFooter.style.setProperty('display', 'none');
-        clonedFooter.setAttribute('aria-hidden', 'true');
-
-        const page = baseEl.querySelector('.ion-page') as HTMLElement;
-        page.style.removeProperty('padding-bottom');
+        ionPage.style.removeProperty('padding-bottom');
       }
     });
 

core/src/components/modal/gestures/sheet.ts

@@ -119,32 +119,31 @@ export const createSheetGesture = (
 
   /**
    * Toggles the visible modal footer when `expandToScroll` is disabled.
-   * @param footer The footer to show.
+   * @param footer The footer to show. TODO: update the values to represent the latest changes.
    */
   const swapFooterVisibility = (footer: 'original' | 'cloned') => {
-    const originalFooter = baseEl.querySelector('ion-footer') as HTMLIonFooterElement | null;
+    const baseElFooter = baseEl.shadowRoot?.querySelector('ion-footer') as HTMLIonFooterElement | null;
+    const ionPage = baseEl.querySelector('.ion-page') as HTMLElement;
+    const ionPageFooter = ionPage.querySelector('ion-footer') as HTMLIonFooterElement | null;
 
-    if (!originalFooter) {
+    // if original was chosen then the footer needs to be moved from
+    // the baseEl to the ionPage
+    // else the footer needs to be moved from the ionPage to the baseEl
+    const footerToMove = footer === 'original' ? baseElFooter : ionPageFooter;
+
+    if (!footerToMove) {
       return;
     }
 
-    const clonedFooter = wrapperEl.nextElementSibling as HTMLIonFooterElement;
-    const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-    const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-
-    footerToShow.style.removeProperty('display');
-    footerToShow.removeAttribute('aria-hidden');
-
-    const page = baseEl.querySelector('.ion-page') as HTMLElement;
+    // Move the footer to the wrapperEl
     if (footer === 'original') {
-      page.style.removeProperty('padding-bottom');
+      ionPage.style.removeProperty('padding-bottom');
+      ionPage.appendChild(footerToMove);
     } else {
-      const pagePadding = footerToShow.clientHeight;
-      page.style.setProperty('padding-bottom', `${pagePadding}px`);
+      const pagePadding = footerToMove.clientHeight;
+      ionPage.style.setProperty('padding-bottom', `${pagePadding}px`);
+      baseEl.shadowRoot?.appendChild(footerToMove);
     }
-
-    footerToHide.style.setProperty('display', 'none');
-    footerToHide.setAttribute('aria-hidden', 'true');
   };
 
   /**

core/src/components/modal/test/sheet/index.html

@@ -190,9 +190,11 @@
           ${items}
         </ion-list>
       </ion-content>
-      <ion-footer>
-        <ion-toolbar>
+      <ion-footer slot="footer">
+        <ion-toolbar style="--background: red;">
           <ion-title>Footer</ion-title>
+          <p>test</p>
+          <ion-button fill="outline">test</ion-button>
         </ion-toolbar>
       </ion-footer>
       `;
@@ -221,6 +223,12 @@
           modalElement.dismiss();
         });
 
+        const footerButton = element.querySelector('ion-footer ion-button');
+        footerButton.addEventListener('click', () => {
+          console.log('Footer button clicked');
+          modalElement.dismiss();
+        });
+
         document.body.appendChild(modalElement);
         return modalElement;
       }