From 934c93c059223f77cb04914605be3398a55ddc1e Mon Sep 17 00:00:00 2001
From: Mike Hartington <mhartington@users.noreply.github.com>
Date: Fri, 16 Feb 2018 09:49:30 -0500
Subject: [PATCH] fix(nav): wait for components to be ready

---
 packages/core/src/components/nav/nav.tsx | 44 +++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx
index 748f76630d..0d2dfc1e52 100644
--- a/packages/core/src/components/nav/nav.tsx
+++ b/packages/core/src/components/nav/nav.tsx
@@ -980,12 +980,54 @@ export function attachViewToDom(nav: Nav, enteringView: ViewController, ti: Tran
       ti.mountingData = mountingData;
       Object.assign(enteringView, mountingData);
       enteringView.state = STATE_ATTACHED;
-    });
+    })
+    // implicit returns FTW
+    .then(() => waitForNewlyAttachedViewElementsToHydate(enteringView.element));
   }
   // it's in the wrong state, so don't attach and just return
   return Promise.resolve();
 }
 
+export function waitForNewlyAttachedViewElementsToHydate(element: HTMLElement) {
+  // the element may or may not be a Stencil element
+  // so check if it has an `<ion-nav>`, `<ion-header>`, and `<ion-content>` for
+  // hydration
+  const promises: Promise<any>[] = [];
+  if ((element as any).componentOnReady) {
+    // it's a stencil element
+    promises.push((element as any).componentOnReady());
+  }
+
+  const navs = element.querySelectorAll('ion-nav');
+  for (let i = 0; i < navs.length; i++) {
+    const nav = navs.item(i);
+    promises.push((nav as any).componentOnReady());
+  }
+
+  // check for headers
+  const headers = element.querySelectorAll('ion-header');
+  for (let i = 0; i < headers.length; i++) {
+    const header = headers.item(i);
+    promises.push((header as any).componentOnReady());
+  }
+
+  // check for contents
+  const contents = element.querySelectorAll('ion-content');
+  for (let i = 0; i < contents.length; i++) {
+    const content = contents.item(i);
+    promises.push((content as any).componentOnReady());
+  }
+
+  // check for back buttons
+  const backButtons = element.querySelectorAll('ion-back-button');
+  for (let i = 0; i < backButtons.length; i++) {
+    const backButton = backButtons.item(i);
+    promises.push((backButton as any).componentOnReady());
+  }
+
+  return Promise.all(promises);
+}
+
 export function initializeViewBeforeTransition(ti: TransitionInstruction): Promise<ViewController[]> {
   let leavingView: ViewController = null;
   let enteringView: ViewController = null;