fix(overlays): removing old band-aid code

Author: ShaneK

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -40,7 +40,6 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
     ref: React.RefObject<HTMLIonOverlayElement>;
     wrapperRef: React.RefObject<HTMLElement>;
     stableMergedRefs: React.RefCallback<HTMLElement>;
-    mutationObserver: MutationObserver | null = null;
 
     constructor(props: IonicReactInternalProps<PropType>) {
       super(props);
@@ -60,57 +59,6 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
       this.ref.current?.addEventListener('ionMount', this.handleIonMount);
       this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
       this.ref.current?.addEventListener('didDismiss', this.handleDidDismiss);
-
-      /**
-       * Watch for when ancestor pages become hidden (ion-page-hidden class).
-       * This handles React Router 6 where pages stay mounted on forward PUSH.
-       * When a page is hidden, we dismiss any open overlays within it.
-       */
-      this.setupPageVisibilityObserver();
-    }
-
-    setupPageVisibilityObserver() {
-      /**
-       * Watch for when ancestor pages get the ion-page-hidden class.
-       * We use a subtree observer on a parent container because:
-       * 1. The overlay's component might not have an IonPage wrapper
-       * 2. Pages might be added dynamically after this component mounts
-       * 3. We want to dismiss overlays when navigation hides the containing page
-       *
-       * This handles React Router 6 where pages stay mounted but get hidden.
-       */
-      this.mutationObserver = new MutationObserver((mutations) => {
-        if (!this.state.isOpen) return;
-
-        for (const mutation of mutations) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            const target = mutation.target as HTMLElement;
-            // If any element gets the ion-page-hidden or ion-page-invisible class, dismiss overlay
-            if (target.classList.contains('ion-page-hidden') || target.classList.contains('ion-page-invisible')) {
-              /**
-               * Only dismiss the overlay if the hidden page is an ancestor of the overlay,
-               * not a descendant. Pages inside the overlay (e.g., IonPage in modal content)
-               * may get ion-page-invisible when they mount inside an outlet context, but
-               * this should not dismiss the overlay.
-               */
-              const overlayElement = this.ref.current;
-              if (overlayElement && !overlayElement.contains(target)) {
-                this.dismissOverlay();
-                return;
-              }
-            }
-          }
-        }
-      });
-
-      // Observe a parent container with subtree: true to catch all descendant class changes
-      // This works even if pages are added after mount or if the current route has no IonPage
-      const appRoot = document.querySelector('#root') || document.body;
-      this.mutationObserver.observe(appRoot, {
-        attributes: true,
-        attributeFilter: ['class'],
-        subtree: true, // Watch all descendants
-      });
     }
 
     componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {
@@ -152,25 +100,6 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
         node.remove();
         detachProps(node, this.props);
       }
-
-      // Clean up mutation observer
-      if (this.mutationObserver) {
-        this.mutationObserver.disconnect();
-        this.mutationObserver = null;
-      }
-    }
-
-    dismissOverlay() {
-      const node = this.ref.current;
-      if (node && this.state.isOpen) {
-        /**
-         * Dismiss the overlay without animation when the page is hidden.
-         * This matches the behavior in componentWillUnmount.
-         */
-        node.removeEventListener('didDismiss', this.handleDidDismiss);
-        node.remove();
-        detachProps(node, this.props);
-      }
     }
 
     render() {

packages/react/test/apps/react18/package.json

@@ -33,7 +33,6 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-legacy": "^4.0.2",
     "@vitejs/plugin-react": "^4.0.1",
     "concurrently": "^6.3.0",
     "cypress": "^13.2.0",

packages/react/test/apps/react18/vite.config.ts

@@ -1,12 +1,10 @@
-import legacy from '@vitejs/plugin-legacy'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
-    legacy()
   ],
   test: {
     globals: true,