From 6ac6810148182a829348e8cac2e3b722448dad98 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 22 Sep 2020 11:55:22 -0400
Subject: [PATCH] fix(vue): pushing a non-tabs page inside of tabs no longer
 renders it inside of the tabs outlet (#22112)

resolves #22066
---
 packages/vue/src/components/IonRouterOutlet.ts | 14 +++++---------
 packages/vue/src/components/IonTabs.ts         |  5 ++---
 packages/vue/src/proxies.ts                    |  1 +
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index 4f48668efb..a628dc94c0 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -4,6 +4,7 @@ import {
   ref,
   computed,
   inject,
+  provide,
   watch,
   shallowRef,
   InjectionKey
@@ -15,19 +16,16 @@ import { fireLifecycle, generateId, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LI
 let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = defineComponent({
   name: 'IonRouterOutlet',
-  setup(_, { attrs }) {
+  setup() {
     const vueRouter = useRouter();
     const route = useRoute();
     const depth = inject(viewDepthKey, 0);
 
     // TODO types
-    const matchedRouteRef: any = computed(() => {
-      if (attrs.tabs) {
-        return route.matched[route.matched.length - 1];
-      }
+    const matchedRouteRef: any = computed(() => route.matched[depth]);
+
+    provide(viewDepthKey, depth + 1)
 
-      return route.matched[depth];
-    });
     const ionRouterOutlet = ref();
     const id = generateId('ion-router-outlet');
 
@@ -207,8 +205,6 @@ export const IonRouterOutlet = defineComponent({
       }
 
       const currentRoute = ionRouter.getCurrentRouteInfo();
-      if (currentRoute.tab !== undefined && !attrs.tabs) return
-
       let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id);
 
       if (!enteringViewItem) {
diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index e657c7662a..8471ad29da 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -20,8 +20,7 @@ export const IonTabs = defineComponent({
           'height': '100%',
           'contain': 'layout size style',
           'z-index': '0'
-        },
-        ref: 'ionTabsRef'
+        }
       },
       [
         h(
@@ -35,7 +34,7 @@ export const IonTabs = defineComponent({
             }
           },
           [
-            h(IonRouterOutlet, { tabs: true })
+            h(IonRouterOutlet)
           ]
         ),
         ...slots.default && slots.default()
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 41e66aaa1b..09abbf904f 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -817,6 +817,7 @@ export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', [
 
 
 export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', [
+  'fireFocusEvents',
   'color',
   'autocapitalize',
   'autofocus',