Skip to content

Commit db28794

Browse files
sean-perkinssean-perkins
authored
fix(nav): pop() will unmount views within a modal (#25638)
Resolves #25637, #21831
1 parent ab65e9a commit db28794

File tree

3 files changed

+196
-4
lines changed

3 files changed

+196
-4
lines changed

‎core/src/components/nav/nav.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ export class Nav implements NavOutlet {
131131
this.swipeGestureChanged();
132132
}
133133

134+
connectedCallback() {
135+
this.destroyed = false;
136+
}
137+
134138
disconnectedCallback() {
135139
for (const view of this.views) {
136140
lifecycle(view.element!, LIFECYCLE_WILL_UNLOAD);
@@ -879,9 +883,13 @@ export class Nav implements NavOutlet {
879883
leavingView: ViewController | undefined,
880884
opts: NavOptions
881885
): NavResult {
882-
const cleanupView = hasCompleted ? enteringView : leavingView;
883-
if (cleanupView) {
884-
this.cleanup(cleanupView);
886+
/**
887+
* If the transition did not complete, the leavingView will still be the active
888+
* view on the stack. Otherwise unmount all the views after the enteringView.
889+
*/
890+
const activeView = hasCompleted ? enteringView : leavingView;
891+
if (activeView) {
892+
this.unmountInactiveViews(activeView);
885893
}
886894

887895
return {
@@ -944,9 +952,13 @@ export class Nav implements NavOutlet {
944952
}
945953

946954
/**
955+
* Unmounts all inactive views after the specified active view.
956+
*
947957
* DOM WRITE
958+
*
959+
* @param activeView The view that is actively visible in the stack. Used to calculate which views to unmount.
948960
*/
949-
private cleanup(activeView: ViewController) {
961+
private unmountInactiveViews(activeView: ViewController) {
950962
// ok, cleanup time!! Destroy all of the views that are
951963
// INACTIVE and come after the active view
952964
// only do this if the views exist, though

‎core/src/components/nav/test/modal-navigation/index.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Nav - Modal Navigation</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Modal Navigation</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
<ion-content>
25+
<ion-button id="openModal">Open Modal</ion-button>
26+
<ion-modal trigger="openModal">
27+
<ion-header>
28+
<ion-toolbar>
29+
<ion-title>Modal</ion-title>
30+
<ion-buttons slot="end">
31+
<ion-button onclick="dismiss()"> Close </ion-button>
32+
</ion-buttons>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content>
36+
<ion-nav></ion-nav>
37+
</ion-content>
38+
</ion-modal>
39+
</ion-content>
40+
</ion-app>
41+
42+
<script>
43+
const modal = document.querySelector('ion-modal');
44+
const nav = document.querySelector('ion-nav');
45+
46+
modal.addEventListener('willPresent', () => {
47+
nav.setRoot('page-one');
48+
});
49+
50+
const dismiss = () => modal.dismiss();
51+
52+
const navigate = (component, componentProps) => {
53+
nav.push(component, componentProps);
54+
};
55+
56+
const navigateBack = () => {
57+
nav.pop();
58+
};
59+
60+
const navigateToRoot = () => {
61+
nav.popToRoot();
62+
};
63+
64+
class PageOne extends HTMLElement {
65+
connectedCallback() {
66+
this.innerHTML = `
67+
<ion-content class="ion-padding">
68+
<h1>Page One</h1>
69+
<ion-button id="goto-page-two" onclick="navigate('page-two')">Go to Page Two</ion-button>
70+
</ion-content>
71+
`;
72+
}
73+
}
74+
75+
class PageTwo extends HTMLElement {
76+
connectedCallback() {
77+
this.innerHTML = `
78+
<ion-content class="ion-padding">
79+
<h1>Page Two</h1>
80+
<ion-button id="goto-page-three" onclick="navigate('page-three')">Go to Page Three</ion-button>
81+
</ion-content>
82+
`;
83+
}
84+
}
85+
86+
class PageThree extends HTMLElement {
87+
connectedCallback() {
88+
this.innerHTML = `
89+
<ion-content class="ion-padding">
90+
<h1>Page Three</h1>
91+
<ion-button id="go-back" onclick="navigateBack()">Go Back</ion-button>
92+
<ion-button id="goto-root"onclick="navigateToRoot()">Go to Root</ion-button>
93+
</ion-content>
94+
`;
95+
}
96+
}
97+
98+
customElements.define('page-one', PageOne);
99+
customElements.define('page-two', PageTwo);
100+
customElements.define('page-three', PageThree);
101+
</script>
102+
</body>
103+
</html>

‎core/src/components/nav/test/modal-navigation/nav.e2e.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { expect } from '@playwright/test';
2+
import type { E2EPage } from '@utils/test/playwright';
3+
import { test } from '@utils/test/playwright';
4+
5+
test.describe('nav: modal-navigation', () => {
6+
test.beforeEach(async ({ page }) => {
7+
await page.goto(`/src/components/nav/test/modal-navigation`);
8+
await openModal(page);
9+
});
10+
11+
test('should render the root page', async ({ page }) => {
12+
const pageOne = page.locator('page-one');
13+
const pageOneHeading = page.locator('page-one h1');
14+
15+
await expect(pageOne).toBeVisible();
16+
await expect(pageOneHeading).toHaveText('Page One');
17+
});
18+
19+
test('should push to the next page', async ({ page }) => {
20+
await page.click('#goto-page-two');
21+
22+
const pageTwo = page.locator('page-two');
23+
const pageTwoHeading = page.locator('page-two h1');
24+
25+
await expect(pageTwo).toBeVisible();
26+
await expect(pageTwoHeading).toHaveText('Page Two');
27+
});
28+
29+
test('should pop to the previous page', async ({ page }) => {
30+
await page.click('#goto-page-two');
31+
await page.click('#goto-page-three');
32+
33+
const pageThree = page.locator('page-three');
34+
const pageThreeHeading = page.locator('page-three h1');
35+
36+
await expect(pageThree).toBeVisible();
37+
await expect(pageThreeHeading).toHaveText('Page Three');
38+
39+
await page.click('#go-back');
40+
41+
const pageTwo = page.locator('page-two');
42+
const pageTwoHeading = page.locator('page-two h1');
43+
44+
// Verifies the leavingView was unmounted
45+
await expect(pageThree).toHaveCount(0);
46+
await expect(pageTwo).toBeVisible();
47+
await expect(pageTwoHeading).toHaveText('Page Two');
48+
});
49+
50+
test.describe('popping to the root', () => {
51+
test('should render the root page', async ({ page }) => {
52+
const pageTwo = page.locator('page-two');
53+
const pageThree = page.locator('page-three');
54+
55+
await page.click('#goto-page-two');
56+
await page.click('#goto-page-three');
57+
58+
await page.click('#goto-root');
59+
60+
const pageOne = page.locator('page-one');
61+
const pageOneHeading = page.locator('page-one h1');
62+
63+
// Verifies all views besides the root were unmounted
64+
await expect(pageTwo).toHaveCount(0);
65+
await expect(pageThree).toHaveCount(0);
66+
67+
await expect(pageOne).toBeVisible();
68+
await expect(pageOneHeading).toHaveText('Page One');
69+
});
70+
});
71+
});
72+
73+
const openModal = async (page: E2EPage) => {
74+
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
75+
await page.click('#openModal');
76+
await ionModalDidPresent.next();
77+
};

0 commit comments

Comments
 (0)