@ionic/react 8.7.14-nightly.20251216 → 8.7.14-nightly.20251217

package/dist/index.js

@@ -1537,6 +1537,18 @@ class IonTabButton extends React.Component {
 }
 
 // TODO(FW-2959): types
+/**
+ * Checks if pathname matches the tab's href using path segment matching.
+ * Avoids false matches like /home2 matching /home by requiring exact match
+ * or a path segment boundary (/).
+ */
+const matchesTab = (pathname, href) => {
+    if (href === undefined) {
+        return false;
+    }
+    const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
+    return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
+};
 class IonTabBarUnwrapped extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -1569,7 +1581,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         const tabKeys = Object.keys(tabs);
         const activeTab = tabKeys.find((key) => {
             const href = tabs[key].originalHref;
-            return this.props.routeInfo.pathname.startsWith(href);
+            return matchesTab(this.props.routeInfo.pathname, href);
         });
         if (activeTab) {
             this.setState({
@@ -1602,7 +1614,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         const tabKeys = Object.keys(state.tabs);
         const activeTab = tabKeys.find((key) => {
             const href = state.tabs[key].originalHref;
-            return props.routeInfo.pathname.startsWith(href);
+            return matchesTab(props.routeInfo.pathname, href);
         });
         // Check to see if the tab button href has changed, and if so, update it in the tabs state
         React.Children.forEach(props.children, (child) => {