Fix nested tab group bug

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
 

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();