fix(modal): .ion-page element is now correctly added (#24811)

resolves #24809
ionic-team · Feb 24, 2022 · 3d0f999 · 3d0f999
1 parent c35b898
commit 3d0f999
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts
@@ -73,7 +73,7 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page"><ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container></div>`,
+  template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
   inputs: [
     'animated',
     'backdropBreakpoint',

diff --git a/angular/test/test-app/e2e/src/modal.spec.ts b/angular/test/test-app/e2e/src/modal.spec.ts
@@ -52,16 +52,27 @@ describe('Modals: Inline', () => {
     cy.get('ion-list ion-item').should('not.exist');
   });
 
-  it('should have items after 1500ms', () => {
-    cy.wait(1500);
+  it('should have items after opening', () => {
+    cy.get('#open-modal').click();
 
     cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');
     cy.get('ion-list ion-item:nth-child(2)').should('have.text', 'B');
     cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
     cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
   });
 
-  it('should have a div with .ion-page', () => {
+  it('should have a div with .ion-page after opening', () => {
+    cy.get('#open-modal').click();
+
     cy.get('ion-modal').children('.ion-page').should('exist');
   });
+
+  it('should remove .ion-page when closing the modal', () => {
+    cy.get('#open-modal').click();
+
+    cy.get('ion-modal').children('.ion-page').should('exist');
+    cy.get('ion-modal').trigger('click', 20, 20);
+
+    cy.get('ion-modal').children('.ion-page').should('not.exist');
+  })
 });
diff --git a/angular/test/test-app/src/app/modal-inline/modal-inline.component.html b/angular/test/test-app/src/app/modal-inline/modal-inline.component.html
@@ -1,4 +1,6 @@
-<ion-modal [isOpen]="true" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5">
+<ion-button id="open-modal">Open Modal</ion-button>
+
+<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5">
   <ng-template>
     <ion-content>
       <ion-list>