From 7df8038d0975a2ed3f9df79af6ad2c66e3f895a8 Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Wed, 14 Nov 2018 10:20:52 +0200
Subject: [PATCH] fix: nested frames order with tabs & suspend/resume (#6528)

---
 tns-core-modules/ui/frame/frame-common.ts     | 29 +++++++++++++++++++
 tns-core-modules/ui/frame/frame.d.ts          |  4 +++
 .../ui/tab-view/tab-view.android.ts           |  2 +-
 tns-core-modules/ui/tab-view/tab-view.ios.ts  |  4 +--
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts
index 818c232ee..a86798ee4 100644
--- a/tns-core-modules/ui/frame/frame-common.ts
+++ b/tns-core-modules/ui/frame/frame-common.ts
@@ -251,6 +251,18 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         }
     }
 
+    private isNestedWithin(parentFrameCandidate: FrameBase): boolean {
+        let frameAncestor: FrameBase = this;
+        while (frameAncestor) {
+            frameAncestor = <FrameBase>getAncestor(frameAncestor, FrameBase);
+            if (frameAncestor === parentFrameCandidate) {
+                return true;
+            }
+        }
+    
+        return false;
+    }
+
     private raiseCurrentPageNavigatedEvents(isBack: boolean) {
         const page = this.currentPage;
         if (page) {
@@ -410,6 +422,23 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         return null;
     }
 
+    public _pushInFrameStackRecursive() {
+        this._pushInFrameStack();
+
+        // make sure nested frames order is kept intact i.e. the nested one should always be on top;
+        // see https://github.com/NativeScript/nativescript-angular/issues/1596 for more information
+        const framesToPush = [];
+        for (const frame of frameStack) {
+            if (frame.isNestedWithin(this)) {
+                framesToPush.push(frame);
+            }
+        }
+
+        for (const frame of framesToPush) {
+            frame._pushInFrameStack();
+        }
+    }
+
     public _pushInFrameStack() {
         _pushInFrameStack(this);
     }
diff --git a/tns-core-modules/ui/frame/frame.d.ts b/tns-core-modules/ui/frame/frame.d.ts
index 08f072ada..5652967a6 100644
--- a/tns-core-modules/ui/frame/frame.d.ts
+++ b/tns-core-modules/ui/frame/frame.d.ts
@@ -158,6 +158,10 @@ export class Frame extends View {
      * @private
      */
     _pushInFrameStack();
+    /**
+     * @private
+     */
+    _pushInFrameStackRecursive();
     /**
      * @private
      */
diff --git a/tns-core-modules/ui/tab-view/tab-view.android.ts b/tns-core-modules/ui/tab-view/tab-view.android.ts
index 18165feb6..3e2b0b816 100644
--- a/tns-core-modules/ui/tab-view/tab-view.android.ts
+++ b/tns-core-modules/ui/tab-view/tab-view.android.ts
@@ -506,7 +506,7 @@ export class TabView extends TabViewBase {
         const newItem = items[newIndex];
         const selectedView = newItem && newItem.view;
         if (selectedView instanceof Frame) {
-            selectedView._pushInFrameStack();
+            selectedView._pushInFrameStackRecursive();
         }
 
         toLoad.forEach(index => {
diff --git a/tns-core-modules/ui/tab-view/tab-view.ios.ts b/tns-core-modules/ui/tab-view/tab-view.ios.ts
index a7baebce1..5d2c9cee5 100644
--- a/tns-core-modules/ui/tab-view/tab-view.ios.ts
+++ b/tns-core-modules/ui/tab-view/tab-view.ios.ts
@@ -261,7 +261,7 @@ export class TabView extends TabViewBase {
         const selectedIndex = this.selectedIndex;
         const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].view;
         if (selectedView instanceof Frame) {
-            selectedView._pushInFrameStack();
+            selectedView._pushInFrameStackRecursive();
         }
 
         this._ios.delegate = this._delegate;
@@ -300,7 +300,7 @@ export class TabView extends TabViewBase {
         if (newItem && this.isLoaded) {
             const selectedView = items[newIndex].view;
             if (selectedView instanceof Frame) {
-                selectedView._pushInFrameStack();
+                selectedView._pushInFrameStackRecursive();
             }
 
             newItem.loadView(newItem.view);