From fa7b08cb30902d5d090bc017f3aed719e5f63b5e Mon Sep 17 00:00:00 2001
From: Thanh Pham <pano.tjoan@yahoo.com>
Date: Thu, 14 Sep 2023 18:33:11 +0700
Subject: [PATCH] fix(): nested tabset

---
 projects/lib/src/lib/modules/tabs/components/tabset.ts   | 9 +++++++--
 .../lib/src/lib/modules/tabs/directives/tab-header.ts    | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/projects/lib/src/lib/modules/tabs/components/tabset.ts b/projects/lib/src/lib/modules/tabs/components/tabset.ts
index b347860a4..1ffe7cbb2 100644
--- a/projects/lib/src/lib/modules/tabs/components/tabset.ts
+++ b/projects/lib/src/lib/modules/tabs/components/tabset.ts
@@ -11,7 +11,7 @@ export class SuiTabset implements AfterContentInit {
     @ContentChildren(SuiTabHeader, { descendants: true })
     private _tabHeaders!:QueryList<SuiTabHeader>;
 
-    @ContentChildren(SuiTabContent, { descendants: true })
+    @ContentChildren(SuiTabContent)
     private _tabContents!:QueryList<SuiTabContent>;
 
     // List of all tabs in the tabset.
@@ -65,12 +65,17 @@ export class SuiTabset implements AfterContentInit {
 
     // Connects tab headers to tab contents, and creates a tab instance for each pairing.
     private loadTabs():void {
+        const parentEleFirstTab = this._tabHeaders.first.eleRef.nativeElement.parentElement;
         // Remove any tabs that no longer have an associated header.
         this.tabs = this.tabs.filter(t => !!this._tabHeaders.find(tH => tH === t.header));
 
         this._tabHeaders
             // Filter out the loaded headers with attached tab instances.
-            .filter(tH => !this.tabs.find(t => t.header === tH))
+            .filter(tH => 
+                !this.tabs.find(t => t.header === tH)
+                // Fix for ContentChildren can't see elements in ng-content like tab-header
+                && (tH.eleRef.nativeElement.parentElement === parentEleFirstTab)
+            )
             .forEach(tH => {
                 const content = this._tabContents.find(tC => tC.id === tH.id);
 
diff --git a/projects/lib/src/lib/modules/tabs/directives/tab-header.ts b/projects/lib/src/lib/modules/tabs/directives/tab-header.ts
index 60c5b9124..5bf3af89a 100644
--- a/projects/lib/src/lib/modules/tabs/directives/tab-header.ts
+++ b/projects/lib/src/lib/modules/tabs/directives/tab-header.ts
@@ -1,4 +1,4 @@
-import { HostBinding, Input, Directive, EventEmitter, HostListener, Output } from "@angular/core";
+import { HostBinding, Input, Directive, EventEmitter, HostListener, Output, ElementRef } from "@angular/core";
 
 @Directive({
     selector: "[suiTabHeader]"
@@ -69,7 +69,7 @@ export class SuiTabHeader {
         }
     }
 
-    constructor() {
+    constructor(public eleRef: ElementRef) {
         this._isActive = false;
         this.isActiveChange = new EventEmitter<boolean>();
         this.isActiveExternalChange = new EventEmitter<boolean>();