fix: tear down views after a modal is closed (#9801)

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');
 	}
 }

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>

apps/toolbox/src/pages/sample-modal.ts

@@ -1,23 +1,46 @@
-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) {
 		args.context.shownModally = true;
 	}
 }
 
+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();
+		}
 	}
 }

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>

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