fix(#2109): tabs query preserve and load url-specified tab initially

GovAlta · Dec 11, 2024 · b8d4c3c · b8d4c3c
1 parent 11d0e76
commit b8d4c3c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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);
     });
   });