From b38337e597a8288f6ab0c5058fa9addd622146be Mon Sep 17 00:00:00 2001
From: Igor Randjelovic <rigor789@gmail.com>
Date: Tue, 1 Mar 2022 21:12:21 +0100
Subject: [PATCH] fix: tear down views after a modal is closed (#9801)

---
 apps/toolbox/src/pages/a11y.ts            | 10 +++++++-
 apps/toolbox/src/pages/a11y.xml           |  4 ++-
 apps/toolbox/src/pages/sample-modal.ts    | 31 ++++++++++++++++++++---
 apps/toolbox/src/pages/sample-modal.xml   |  2 +-
 packages/core/ui/core/view/view-common.ts |  2 ++
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/apps/toolbox/src/pages/a11y.ts b/apps/toolbox/src/pages/a11y.ts
index 67bdbfd2f..d08cbe6fa 100644
--- a/apps/toolbox/src/pages/a11y.ts
+++ b/apps/toolbox/src/pages/a11y.ts
@@ -35,6 +35,14 @@ export class AccessibilityModel extends Observable {
 	}
 
 	openModal() {
-		page.showModal('pages/sample-modal');
+		page.showModal('pages/sample-modal', {
+			closeCallback(args) {
+				console.log('close modal callback', args);
+			},
+		} as ShowModalOptions);
+	}
+
+	openNormal() {
+		page.frame.navigate('pages/sample-modal');
 	}
 }
diff --git a/apps/toolbox/src/pages/a11y.xml b/apps/toolbox/src/pages/a11y.xml
index 884e35e07..1cf029804 100644
--- a/apps/toolbox/src/pages/a11y.xml
+++ b/apps/toolbox/src/pages/a11y.xml
@@ -7,6 +7,9 @@
     <GridLayout padding="20" class="a11y-demo-page">   
       <ScrollView>
           <StackLayout>
+            <Button text="Open Modal Page" class="view-item" tap="{{openModal}}" />
+            <Button text="Open Normal Page" class="view-item" tap="{{openNormal}}" />
+
             <Label text="Accessible Label" class="view-item a11y text-center" accessibilityLabel="Accessible Label" accessibilityHint="Just a label" accessibilityRole="{{accessibilityRole.StaticText}}" accessibilityValue="Accessible Label" />
             <Button text="Accessible Button" class="view-item a11y" accessibilityLabel="Accessible Button" accessibilityHint="Tapping this really does nothing" />
             
@@ -30,7 +33,6 @@
               <Label row="1" text="With another item in a row" class="view-item text-center" />
               <Label rowSpan="2" col="1" text="Hi" />
             </GridLayout>
-            <Button text="Open Modal" class="view-item" tap="{{openModal}}" />
             <Slider value="10" minValue="0" maxValue="100" class="view-item a11y" accessibilityLabel="Slider" accessibilityHint="A smooth slider" accessibilityValue="10" />
           </StackLayout>
       </ScrollView>
diff --git a/apps/toolbox/src/pages/sample-modal.ts b/apps/toolbox/src/pages/sample-modal.ts
index 719c820a6..3ed96e9ed 100644
--- a/apps/toolbox/src/pages/sample-modal.ts
+++ b/apps/toolbox/src/pages/sample-modal.ts
@@ -1,10 +1,10 @@
-import { Page, ShownModallyData, Observable } from '@nativescript/core';
+import { Page, ShownModallyData, Observable, LoadEventData } from '@nativescript/core';
 
 let page: Page;
 let closeCallback: Function;
 export function onShownModally(args: ShownModallyData) {
-	page = <Page>args.object;
-	page.bindingContext = new SampleModal();
+	console.log('page shown modally');
+
 	closeCallback = args.closeCallback;
 
 	if (args.context) {
@@ -12,12 +12,35 @@ export function onShownModally(args: ShownModallyData) {
 	}
 }
 
+export function onLoaded(args: LoadEventData) {
+	console.log('page loaded');
+
+	page = args.object as Page;
+	page.bindingContext = new SampleModal();
+
+	const disposePage = page.disposeNativeView.bind(page);
+	page.disposeNativeView = () => {
+		console.log('-'.repeat(100));
+		console.log(' [!!] Disposing modal page...');
+		console.log('-'.repeat(100));
+
+		disposePage();
+	};
+}
+
 export class SampleModal extends Observable {
 	close() {
 		// TODO: a11y
 		// if (global.isIOS) {
 		//   (<UIViewController>page.ios).view.accessibilityPerformEscape();
 		// }
-		closeCallback();
+		if (typeof closeCallback === 'function') {
+			closeCallback('data from modal');
+			// reset callback...
+			closeCallback = undefined;
+		} else {
+			// fallback to regular nav back...
+			page.frame.goBack();
+		}
 	}
 }
diff --git a/apps/toolbox/src/pages/sample-modal.xml b/apps/toolbox/src/pages/sample-modal.xml
index fe19b35ce..04f1e8df0 100644
--- a/apps/toolbox/src/pages/sample-modal.xml
+++ b/apps/toolbox/src/pages/sample-modal.xml
@@ -1,4 +1,4 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="page">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally" class="page">
 
     <GridLayout padding="20">   
       <ScrollView>
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index 55b8c906a..cce5a3838 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/packages/core/ui/core/view/view-common.ts
@@ -407,6 +407,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 					if (typeof options.closeCallback === 'function') {
 						options.closeCallback.apply(undefined, originalArgs);
 					}
+
+					that._tearDownUI(true);
 				};
 
 				that._hideNativeModalView(parent, whenClosedCallback);