fix(react): setting active tab properly on mount, closes #21830

packages/react-router/test-app/build.sh

@@ -3,7 +3,7 @@ cd ../../react
 npm run build
 npm pack
 cd ../react-router/test-app
-npm i ../../react/ionic-react-5.2.3.tgz
+npm i ../../react/ionic-react-5.3.0.tgz
 npm run start
 
 

packages/react-router/test-app/cypress/integration/routing.spec.js

@@ -241,6 +241,15 @@ describe('Navigation Tests', () => {
     cy.ionPageVisible('settings-page')
   })
 
+  it('/routing/tabs/redirect > Should be on settings page > Home Tab > Should be on home page', () => {
+    // tests that a redirect going to a tab other than the first tab works
+    // fixes bug https://github.com/ionic-team/ionic-framework/issues/21830
+    cy.visit(`http://localhost:${port}/routing/tabs/redirect`)
+    cy.ionPageVisible('settings-page')
+    cy.ionTabClick('Home')
+    cy.ionPageVisible('home-page')
+  })
+
   it('/routing/ > Details 1 > Details 2 > Details 3 > Back > Settings Tab > Home Tab > Should be at details 2 page', () => {
     // fixes an issue where route history was being lost after starting to go back, switching tabs
     // and switching back to the same tab again

packages/react-router/test-app/package.json

@@ -8,7 +8,7 @@
     "@capacitor/core": "1.5.2",
     "@capacitor/ios": "^2.2.0",
     "@ionic/core": "^5.3.0-dev.202006121329.e968bd0",
-    "@ionic/react": "file:../../react/ionic-react-5.3.0.tgz",
+    "@ionic/react": "file:../../react/ionic-react-5.3.1.tgz",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",

packages/react-router/test-app/src/pages/routing/Tabs.tsx

@@ -12,7 +12,7 @@ interface TabsProps {
 }
 
 const Tabs: React.FC<TabsProps> = () => {
-  
+
   return (
     <IonTabs>
       <IonRouterOutlet id="tabs">
@@ -25,6 +25,7 @@ const Tabs: React.FC<TabsProps> = () => {
         <Route path="/routing/tabs/settings/details/:id" component={SettingsDetails} exact={true} />
         <Route path="/routing/tabs/tab3" component={Tab3} />
         <Route path="/routing/tabs" render={() => <Redirect to="/routing/tabs/home" />} exact={true} />
+        <Route path="/routing/tabs/redirect" render={() => <Redirect to="/routing/tabs/settings" />} exact={true} />
         {/* <Route path="/routing/tabs" render={() => <Route render={() => <Redirect to="/tabs/home" />} />} /> */}
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
@@ -45,4 +46,4 @@ const Tabs: React.FC<TabsProps> = () => {
   );
 };
 
-export default Tabs;
+export default Tabs;

packages/react/src/components/navigation/IonTabBar.tsx

@@ -30,7 +30,7 @@ interface TabUrls {
 }
 
 interface IonTabBarState {
-  activeTab: string | undefined;
+  activeTab?: string;
   tabs: { [key: string]: TabUrls; };
 }
 
@@ -51,15 +51,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
       }
     });
 
-    const tabKeys = Object.keys(tabs);
-    const activeTab = tabKeys
-      .find(key => {
-        const href = tabs[key].originalHref;
-        return props.routeInfo!.pathname.startsWith(href);
-      }) || tabKeys[0];
-
     this.state = {
-      activeTab,
       tabs
     };
 
@@ -69,6 +61,28 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
     this.selectTab = this.selectTab.bind(this);
   }
 
+  componentDidMount() {
+    const tabs = this.state.tabs;
+    const tabKeys = Object.keys(tabs);
+    const activeTab = tabKeys
+      .find(key => {
+        const href = tabs[key].originalHref;
+        return this.props.routeInfo!.pathname.startsWith(href);
+      });
+
+    if (activeTab) {
+      this.setState({
+        activeTab
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.state.activeTab) {
+      this.setActiveTabOnContext(this.state.activeTab);
+    }
+  }
+
   setActiveTabOnContext = (_tab: string) => { };
 
   selectTab(tab: string) {
@@ -94,7 +108,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
       .find(key => {
         const href = state.tabs[key].originalHref;
         return props.routeInfo!.pathname.startsWith(href);
-      }) || tabKeys[0];
+      });
 
     // Check to see if the tab button href has changed, and if so, update it in the tabs state
     React.Children.forEach((props as any).children, (child: any) => {