fix(router): fix selection

ionic-team · Mar 15, 2018 · 207f416 · 207f416
1 parent f48d817
commit 207f416
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
@@ -200,6 +200,7 @@ export class Modal implements OverlayInterface {
 
   hostData() {
     return {
+      'no-router': true,
       style: {
         zIndex: 20000 + this.overlayId,
       }

diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
@@ -37,6 +37,7 @@ export class NavControllerBase implements NavOutlet {
   private _init = false;
   private _queue: TransitionInstruction[] = [];
   private _sbTrns: Transition;
+  private useRouter = false;
   isTransitioning = false;
   private _destroyed = false;
 
@@ -60,8 +61,7 @@ export class NavControllerBase implements NavOutlet {
   @Watch('root')
   rootChanged() {
     if (this.root) {
-      const useRouter = !!document.querySelector('ion-router');
-      if (!useRouter) {
+      if (!this.useRouter) {
         this.setRoot(this.root);
       } else if (Build.isDev) {
         console.warn('<ion-nav> does not support a root attribute when using ion-router.');
@@ -72,6 +72,7 @@ export class NavControllerBase implements NavOutlet {
   @Event() ionNavChanged: EventEmitter;
 
   componentWillLoad() {
+    this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
     if (this.swipeBackEnabled === undefined) {
       this.swipeBackEnabled = this.mode === 'ios' && this.config.getBoolean('swipeBackEnabled', true);
     }
@@ -359,9 +360,9 @@ export class NavControllerBase implements NavOutlet {
     this.isTransitioning = false;
     // let's see if there's another to kick off
     this._nextTrns();
-    const router = document.querySelector('ion-router');
     const isPop = result.direction === NavDirection.back;
-    if (router) {
+    if (this.useRouter) {
+      const router = document.querySelector('ion-router');
       router.navChanged(isPop);
     }
 

diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
@@ -215,6 +215,7 @@ export class Popover implements OverlayInterface {
       style: {
         zIndex: 10000 + this.overlayId,
       },
+      'no-router': true,
       class: {
         ...themedClasses
       }

diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
@@ -50,7 +50,7 @@ export function readNavState(node: HTMLElement) {
   return {ids, pivot};
 }
 
-const QUERY = 'ion-nav,ion-tabs';
+const QUERY = ':not([no-router]) ion-nav,:not([no-router]) ion-tabs';
 
 function searchNavNode(root: HTMLElement): NavOutletElement {
   if (root.matches(QUERY)) {

diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
@@ -11,6 +11,7 @@ export class Tabs implements NavOutlet {
 
   private ids = -1;
   private transitioning = false;
+  private useRouter = false;
   private tabsId: number = (++tabIds);
   private leavingTab: HTMLIonTabElement | undefined;
 
@@ -70,6 +71,8 @@ export class Tabs implements NavOutlet {
   @Event() ionNavChanged: EventEmitter<any>;
 
   componentWillLoad() {
+    this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
+
     this.loadConfig('tabsPlacement', 'bottom');
     this.loadConfig('tabsLayout', 'icon-top');
     this.loadConfig('tabsHighlight', true);
@@ -159,7 +162,7 @@ export class Tabs implements NavOutlet {
   }
 
   private initSelect(): Promise<void> {
-    if (document.querySelector('ion-router')) {
+    if (this.useRouter) {
       if (Build.isDev) {
         const selectedTab = this.tabs.find(t => t.selected);
         if (selectedTab) {
@@ -241,9 +244,11 @@ export class Tabs implements NavOutlet {
   }
 
   private notifyRouter() {
-    const router = document.querySelector('ion-router');
-    if (router) {
-      return router.navChanged(false);
+    if (this.useRouter) {
+      const router = document.querySelector('ion-router');
+      if (router) {
+        return router.navChanged(false);
+      }
     }
     return Promise.resolve(false);
   }