refactor(tabs): use default value for navManager

ionic-team · Sep 11, 2024 · cdbab6f · cdbab6f
1 parent 641303c
commit cdbab6f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
@@ -51,7 +51,7 @@ export const IonTabBar = defineComponent({
     };
   },
   updated() {
-    this.setupTabState(inject("navManager"));
+    this.setupTabState(inject("navManager", null));
   },
   methods: {
     setupTabState(ionRouter: any) {
@@ -133,7 +133,7 @@ export const IonTabBar = defineComponent({
       const tabKeys = Object.keys(tabs);
       let activeTab = tabKeys.find((key) => {
         const href = tabs[key].originalHref;
-        return currentRoute && currentRoute.pathname.startsWith(href);
+        return currentRoute?.pathname.startsWith(href);
       });
 
       /**
@@ -171,19 +171,19 @@ export const IonTabBar = defineComponent({
          * land on /tabs/tab1/child instead of /tabs/tab1.
          */
         if (
-          currentRoute &&
-          (activeTab !== prevActiveTab || prevHref !== currentRoute.pathname)
+          activeTab !== prevActiveTab ||
+          prevHref !== currentRoute?.pathname
         ) {
           /**
            * By default the search is `undefined` in Ionic Vue,
            * but Vue Router can set the search to the empty string.
            * We check for truthy here because empty string is falsy
            * and currentRoute.search cannot ever be a boolean.
            */
-          const search = currentRoute.search ? `?${currentRoute.search}` : "";
+          const search = currentRoute?.search ? `?${currentRoute.search}` : "";
           tabs[activeTab] = {
             ...tabs[activeTab],
-            currentHref: currentRoute.pathname + search,
+            currentHref: currentRoute?.pathname + search,
           };
         }
 
@@ -192,8 +192,7 @@ export const IonTabBar = defineComponent({
          * set the previous tab back to its original href.
          */
         if (
-          currentRoute &&
-          currentRoute.routerAction === "pop" &&
+          currentRoute?.routerAction === "pop" &&
           activeTab !== prevActiveTab
         ) {
           tabs[prevActiveTab] = {
@@ -230,7 +229,7 @@ export const IonTabBar = defineComponent({
         if (activeChild) {
           tabDidChange && this.$props._tabsWillChange(activeTab);
 
-          if (hasRouterOutlet && ionRouter) {
+          if (hasRouterOutlet && ionRouter !== null) {
             ionRouter.handleSetCurrentTab(activeTab);
           }
 
@@ -250,7 +249,7 @@ export const IonTabBar = defineComponent({
     },
   },
   mounted() {
-    const ionRouter: any = inject("navManager");
+    const ionRouter: any = inject("navManager", null);
 
     this.setupTabState(ionRouter);
 

diff --git a/packages/vue/src/components/IonTabButton.ts b/packages/vue/src/components/IonTabButton.ts
@@ -27,7 +27,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
     defineCustomElement();
 
     // TODO(FW-2969): type
-    const ionRouter: any = inject("navManager");
+    const ionRouter: any = inject("navManager", null);
     const onClick = (ev: Event) => {
       if (ev.cancelable) {
         ev.preventDefault();
@@ -72,7 +72,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
        * should direct users back to the root
        * of the tab.
        */
-      if (ionRouter) {
+      if (ionRouter !== null) {
         if (prevActiveTab === tab) {
           if (originalHref !== currentHref) {
             ionRouter.resetTab(tab);