From a0e929787ef4d16bf8115b97d00deb10373c77f1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 5 Jan 2021 08:41:56 -0500
Subject: [PATCH] Fix nested tab group bug

---
 docs/getting-started/changelog.md      |  1 +
 src/components/tab-group/tab-group.tsx | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 2eb86e327..6a9052809 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
 - Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
+- Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
 
 ## 2.0.0-beta.25
 
diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index 52c1825c4..b59d24493 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -114,6 +114,7 @@ export class TabGroup {
 
   getAllTabs(includeDisabled = false) {
     const slot = this.tabs.querySelector('slot');
+
     return [...slot.assignedElements()].filter((el: any) => {
       return includeDisabled
         ? el.tagName.toLowerCase() === 'sl-tab'
@@ -135,6 +136,12 @@ export class TabGroup {
   handleClick(event: MouseEvent) {
     const target = event.target as HTMLElement;
     const tab = target.closest('sl-tab');
+    const tabGroup = tab.closest('sl-tab-group');
+
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this.host) {
+      return false;
+    }
 
     if (tab) {
       this.setActiveTab(tab);
@@ -142,11 +149,17 @@ export class TabGroup {
   }
 
   handleKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const tab = target.closest('sl-tab');
+    const tabGroup = tab.closest('sl-tab-group');
+
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this.host) {
+      return false;
+    }
+
     // Activate a tab
     if (['Enter', ' '].includes(event.key)) {
-      const target = event.target as HTMLElement;
-      const tab = target.closest('sl-tab');
-
       if (tab) {
         this.setActiveTab(tab);
         event.preventDefault();