diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 1c66ac9713..655006931f 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -442,6 +442,12 @@ export class Modal implements ComponentInterface, OverlayInterface { await this.currentTransition; } + /** + * If the modal is presented multiple times (inline modals), we + * need to reset the current breakpoint to the initial breakpoint. + */ + this.currentBreakpoint = this.initialBreakpoint; + const data = { ...this.componentProps, modal: this.el, @@ -668,7 +674,7 @@ export class Modal implements ComponentInterface, OverlayInterface { enteringAnimation.forEach((ani) => ani.destroy()); } - + this.currentBreakpoint = undefined; this.currentTransition = undefined; this.animation = undefined; return dismissed; diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts index 498eb4a639..b1bbb24a66 100644 --- a/core/src/components/modal/test/sheet/modal.e2e.ts +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -133,4 +133,65 @@ test.describe('sheet modal: setting the breakpoint', () => { expect(ionBreakpointDidChange.events.length).toBe(1); }); }); + + test('it should reset the breakpoint value on dismiss', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/25245', + }); + + await page.setContent(` + + Open + + + Dismiss + Set breakpoint + + + + + `); + + const modal = page.locator('ion-modal'); + const dismissButton = page.locator('#dismiss'); + const openButton = page.locator('#open-modal'); + const setBreakpointButton = page.locator('#set-breakpoint'); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + + await openButton.click(); + await ionModalDidPresent.next(); + + await setBreakpointButton.click(); + await ionBreakpointDidChange.next(); + + await dismissButton.click(); + await ionModalDidDismiss.next(); + + await openButton.click(); + await ionModalDidPresent.next(); + + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + + expect(breakpoint).toBe(0.25); + + await setBreakpointButton.click(); + await ionBreakpointDidChange.next(); + + const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + + expect(updatedBreakpoint).toBe(0.5); + }); });