From 630ffe5ca4bc5630c83a9deb306757e321fe0623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:05:58 +0100
Subject: [PATCH] Refactor Tabs component to use matchPath for improved route
 matching logic

---
 .../components/tabsv2/Tabsv2.component.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
index 1d2bc11e40..b0a25ba992 100644
--- a/src/lib/components/tabsv2/Tabsv2.component.tsx
+++ b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import {
-  BrowserRouter,
+  matchPath,
   Outlet,
   Route,
   Routes,
@@ -113,13 +113,13 @@ function Tabs({
   useEffect(() => {
     let hasSelectedTab = false;
     filteredTabsChildren.forEach((child, index) => {
-      const fullPath = child.props.path.startsWith('/')
-        ? child.props.path
-        : url + '/' + child.props.path;
-
       const isSelected =
-        location.pathname.match(new RegExp(`^${fullPath}$`, 'i')) &&
-        (child.props.query ? matchQuery(child.props.query) : true);
+        !!matchPath(
+          location.pathname,
+          child.props.path.startsWith('/')
+            ? child.props.path
+            : url + '/' + child.props.path,
+        ) && (child.props.query ? matchQuery(child.props.query) : true);
 
       if (isSelected) {
         setSelectedTabIndex(index);
@@ -224,10 +224,13 @@ function Tabs({
         <Routes>
           {filteredTabsChildren.map((tab, index) => {
             const path = tab.props.path.split('/').pop();
+
             return (
               <Route
                 key={index}
-                path={`/${path}`}
+                path={
+                  tab.props.path.startsWith('/') ? '/' + path : url + '/' + path
+                }
                 element={
                   <>
                     <TabContent