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

Resolves #26253
ionic-team · Nov 9, 2022 · d709ff6 · d709ff6
1 parent 16e882f
commit d709ff6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/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',

diff --git a/packages/react/test-app/tests/e2e/specs/overlay-components/KeepContentsMounted.cy.ts b/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', () => {