From b8d4c3c6321cdf8d7a4a072db99106c33c7e0e15 Mon Sep 17 00:00:00 2001
From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:53:38 -0500
Subject: [PATCH] fix(#2109): tabs query preserve and load url-specified tab
 initially

---
 libs/web-components/src/components/tabs/Tabs.svelte | 13 ++++++++-----
 .../web-components/src/components/tabs/tabs.spec.ts |  4 ----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/libs/web-components/src/components/tabs/Tabs.svelte b/libs/web-components/src/components/tabs/Tabs.svelte
index dcca73c75..f90981bfa 100644
--- a/libs/web-components/src/components/tabs/Tabs.svelte
+++ b/libs/web-components/src/components/tabs/Tabs.svelte
@@ -41,14 +41,17 @@
 
     // Find the matching tab based on href
     const tabs = _tabsEl?.querySelectorAll('[role="tab"]');
-    if (!tabs) return null;
 
     for (let i = 0; i < tabs.length; i++) {
       const tab = tabs[i] as HTMLAnchorElement;
-      if (
-        tab.getAttribute("href")?.endsWith(hash) ||
-        hash.endsWith(tab.getAttribute("href")?.split("#")[1] || "")
-      ) {
+
+      const tabHref = tab.getAttribute("href");
+      const tabHash = tabHref?.split("#")[1] || "";
+
+      const isFullUrlMatch = tabHref?.endsWith(hash);
+      const isHashOnlyMatch = hash.endsWith(tabHash);
+
+      if (isFullUrlMatch || isHashOnlyMatch) {
         return i + 1;
       }
     }
diff --git a/libs/web-components/src/components/tabs/tabs.spec.ts b/libs/web-components/src/components/tabs/tabs.spec.ts
index 6d090f816..e51578e2d 100644
--- a/libs/web-components/src/components/tabs/tabs.spec.ts
+++ b/libs/web-components/src/components/tabs/tabs.spec.ts
@@ -56,7 +56,6 @@ describe("Tabs", () => {
     const result = render(Tabs, { initialtab: 2 });
 
     await waitFor(() => {
-      setTimeout(() => {
       const tab1Link = result.container.querySelector("a#tab-1");
       const tab2Link = result.container.querySelector("a#tab-2");
       const tabPanel = result.container.querySelector("div[role=tabpanel]");
@@ -73,7 +72,6 @@ describe("Tabs", () => {
 
       expect(goaTabs[0].getAttribute("open")).toBe("false");
       expect(goaTabs[1].getAttribute("open")).toBe("true");
-      }, 1000);
     });
   });
 
@@ -82,11 +80,9 @@ describe("Tabs", () => {
 
     // last tab
     await waitFor(() => {
-      setTimeout(() => {
       const tab = result.container.querySelector("a#tab-2");
       expect(tab).toBeTruthy();
       expect(tab?.getAttribute("aria-selected")).toBe("true");
-      }, 1000);
     });
   });