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

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

* removing commented code

* merge with master

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-lock.json

@@ -1472,22 +1472,27 @@
       }
     },
     "@ionic/react": {
-      "version": "file:../../react/ionic-react-5.2.2.tgz",
-      "integrity": "sha512-J91dBw40L12h30aQkualYzTZaEeecA35f+qCv2Mx3FIHforNYzs8d1EL5kIddhscIg0sKI4983PU0VVdkdDbQA==",
+      "version": "file:../../react/ionic-react-5.3.0.tgz",
+      "integrity": "sha512-2++sEixQhBWs0gzVjE+5ifndd9J4eUzv75/AAB++hvEaDdjGZkiatyowD2FzjEZ3VIikmvECjymwt4820jL+VQ==",
       "requires": {
-        "@ionic/core": "5.2.2",
-        "ionicons": "^5.0.1",
+        "@ionic/core": "5.3.0",
+        "ionicons": "^5.1.2",
         "tslib": "*"
       },
       "dependencies": {
         "@ionic/core": {
-          "version": "5.2.2",
-          "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.2.2.tgz",
-          "integrity": "sha512-KUGJIWTcKuMGmLhmVpmszeDHtGoDmDWpR9mXnw/J+GTlS9Ix/b5mIslPbhsrJyI/qR449lL+cAvjbeeoVRUjhg==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.3.0.tgz",
+          "integrity": "sha512-W6H5mL8N2HvjjGzRnIGE7dEa7itJ9qIw/IC2xExvAo806nULX2PfswLQw3qL09ZOS9OXqZpCDMzX79dEzGa6vg==",
           "requires": {
-            "ionicons": "^5.0.1",
+            "ionicons": "^5.1.2",
             "tslib": "^1.10.0"
           }
+        },
+        "ionicons": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz",
+          "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA=="
         }
       }
     },

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) => {