Fix issue with nested <Tabs> components (#473)

withastro · Aug 8, 2023 · 6a7692a · 6a7692a
1 parent 3e5d4b1
commit 6a7692a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/wise-boats-flow.md b/.changeset/wise-boats-flow.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fix issue with nested `<Tabs>` components
diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro
@@ -77,7 +77,7 @@ const { html, panels } = processPanels(panelHtml);
 			super();
 			const tablist = this.querySelector<HTMLUListElement>('[role="tablist"]')!;
 			this.tabs = [...tablist.querySelectorAll<HTMLAnchorElement>('[role="tab"]')];
-			this.panels = [...this.querySelectorAll<HTMLElement>('[role="tabpanel"]')];
+			this.panels = [...this.querySelectorAll<HTMLElement>(':scope > [role="tabpanel"]')];
 
 			this.tabs.forEach((tab, i) => {
 				// Handle clicks for mouse users