diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index 58fa22d40d..fac30f8a2e 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -144,6 +144,7 @@ export const createInlineOverlayComponent = ( { 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 index b466e0e753..8e4b0bdf83 100644 --- 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', () => {