fix(android): nested dialog/fragment handling (NativeScript#9495)

NathanWalker · web-flow · commit 4c547bb00c55 · 2021-08-03T21:57:19.000-07:00
diff --git a/apps/ui/src/modal-view/nested-modal-tab.xml b/apps/ui/src/modal-view/nested-modal-tab.xml
@@ -0,0 +1,24 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+    <ActionBar>
+        <Label text="Nested Modal Tab"></Label>
+    </ActionBar>
+
+    <TabView selectedTabTextColor="green">
+         <TabViewItem title="First">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="nested-frames/nested-page" actionBarVisibility="always"></Frame>
+            </GridLayout>
+        </TabViewItem>
+        <TabViewItem title="Second">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="nested-frames/nested-page" actionBarVisibility="always"></Frame>
+            </GridLayout>
+        </TabViewItem>
+        <TabViewItem title="Third">
+            <GridLayout>
+                <Frame id="nestedFrame" defaultPage="nested-frames/nested-page" actionBarVisibility="always"></Frame>
+            </GridLayout>
+        </TabViewItem>
+    </TabView>
+</Page>
diff --git a/apps/ui/src/modal-view/nested-modal.ts b/apps/ui/src/modal-view/nested-modal.ts
@@ -9,6 +9,14 @@ export function onShowingModally(args: ShownModallyData) {
 		onTap: function () {
 			Dialogs.alert('it works!');
 		},
+		openNestedModal: function () {
+			page.showModal('modal-view/nested-nested-modal', {
+				context: 'Neste mODAL',
+				closeCallback: () => {
+					console.log('nested-modal.openNestedModal');
+				},
+			});
+		},
 	});
 }
 
diff --git a/apps/ui/src/modal-view/nested-modal.xml b/apps/ui/src/modal-view/nested-modal.xml
@@ -5,5 +5,6 @@
   <StackLayout backgroundColor="PaleGreen" margin="10">
     <Label text="{{ context }}"/>
     <Button text="Show Alert" tap="{{ onTap }}"/>
+    <Button text="Open Nested Modal" tap="{{ openNestedModal }}"/>
   </StackLayout>
 </Page>
diff --git a/apps/ui/src/modal-view/nested-nested-frame.ts b/apps/ui/src/modal-view/nested-nested-frame.ts
@@ -0,0 +1,29 @@
+import { Page, EventData, fromObject, Dialogs } from '@nativescript/core';
+
+export function navigatingTo(args) {
+	const page = <Page>args.object;
+
+	page.bindingContext = fromObject({
+		context: args.context,
+		onTap: function () {
+			Dialogs.alert('it works!');
+		},
+		openNestedFrames: function () {
+			page.showModal('modal-view/nested-modal-tab', {
+				context: 'Nested Modal Tab',
+				fullscreen: true,
+				closeCallback: () => {
+					console.log('nested-modal.openNestedModal');
+				},
+			});
+		},
+	});
+}
+
+export function onLoaded(args: EventData) {
+	console.log('nested-nested-modal.onLoaded');
+}
+
+export function onUnloaded() {
+	console.log('nested-nested-modal.onUnloaded');
+}
diff --git a/apps/ui/src/modal-view/nested-nested-frame.xml b/apps/ui/src/modal-view/nested-nested-frame.xml
@@ -0,0 +1,9 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+  navigatingTo="navigatingTo"
+  loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
+  <StackLayout backgroundColor="PaleGreen" margin="10">
+    <Label text="{{ context }}"/>
+    <Button text="Show Alert" tap="{{ onTap }}"/>
+    <Button text="Open Nested Frames" tap="{{ openNestedFrames }}" />
+  </StackLayout>
+</Page>
diff --git a/apps/ui/src/modal-view/nested-nested-modal.xml b/apps/ui/src/modal-view/nested-nested-modal.xml
@@ -0,0 +1 @@
+﻿<Frame defaultPage="modal-view/nested-nested-frame"></Frame>
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
@@ -345,6 +345,9 @@ export class View extends ViewCommon {
 	}
 
 	public _getFragmentManager(): androidx.fragment.app.FragmentManager {
+		if ((<any>global)._dialogFragment) {
+			return (<any>global)._dialogFragment.getChildFragmentManager();
+		}
 		let manager = this._manager;
 		if (!manager) {
 			let view: View = this;
@@ -690,20 +693,19 @@ export class View extends ViewCommon {
 		};
 
 		saveModal(dialogOptions);
-
 		this._dialogFragment = df;
+		(<any>global)._dialogFragment = df;
 		this._raiseShowingModallyEvent();
-
 		this._dialogFragment.show(parent._getRootFragmentManager(), this._domId.toString());
 	}
 
 	protected _hideNativeModalView(parent: View, whenClosedCallback: () => void) {
-		const manager = this._dialogFragment.getFragmentManager();
+		const manager = this._dialogFragment.getParentFragmentManager();
 		if (manager) {
 			this._dialogFragment.dismissAllowingStateLoss();
 		}
-
 		this._dialogFragment = null;
+		(<any>global)._dialogFragment = null;
 		whenClosedCallback();
 	}
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<Frame defaultPage="modal-view/nested-nested-frame"></Frame>`