fix(react): inline overlays display contents consistently (#26255)

Resolves #26253

Author: sean-perkins

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -144,6 +144,7 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
                 {
                   id: 'ion-react-wrapper',
                   ref: this.wrapperRef,
+                  className: 'ion-delegate-host',
                   style: {
                     display: 'flex',
                     flexDirection: 'column',

packages/react/test-app/tests/e2e/specs/overlay-components/KeepContentsMounted.cy.ts

@@ -27,6 +27,25 @@ describe('keepContentsMounted', () => {
 
       cy.get('ion-modal ion-content').should('exist');
     });
+
+    it('should display contents consistently on re-open', () => {
+      // https://github.com/ionic-team/ionic-framework/issues/26253
+      cy.visit('/keep-contents-mounted');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-content').should('exist');
+
+      cy.get('ion-modal ion-button').click();
+
+      cy.get('ion-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-button').should('be.visible');
+    })
   })
   describe('popover', () => {
     it('should not mount component if false', () => {