javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): reset breakpoint to initial breakpoint on present (#25246)

Browse Source 
Resolves #25245
This commit is contained in:
Sean Perkins
2022-05-15 23:06:24 -04:00
committed by GitHub
parent 16a8b1e105
commit 2557bf3c3e
2 changed files with 68 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/modal/modal.tsx
View File

@ -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;

61
core/src/components/modal/test/sheet/modal.e2e.ts
View File

@ -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(`
<ion-content>
<ion-button id="open-modal">Open</ion-button>
<ion-modal trigger="open-modal" initial-breakpoint="0.25">
<ion-content>
<ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
<ion-button id="set-breakpoint">Set breakpoint</ion-button>
</ion-content>
</ion-modal>
</ion-content>
<script>
const modal = document.querySelector('ion-modal');
const setBreakpointButton = document.querySelector('#set-breakpoint');
modal.breakpoints = [0.25, 0.5, 1];
setBreakpointButton.addEventListener('click', () => {
modal.setCurrentBreakpoint(0.5);
});
</script>
`);
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);
});
});