fix: nested frames order with tabs & suspend/resume (#6528)

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

tns-core-modules/ui/frame/frame.d.ts

@@ -158,6 +158,10 @@ export class Frame extends View {
      * @private
      */
     _pushInFrameStack();
+    /**
+     * @private
+     */
+    _pushInFrameStackRecursive();
     /**
      * @private
      */

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 => {

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