fix(bal-tabs): scope bal-tab-items

baloise · Nov 29, 2022 · 67f1fd6 · 67f1fd6
1 parent 4ccdc66
commit 67f1fd6
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -20,6 +20,7 @@ export class Tabs {
   private mutationO?: MutationObserver
   private timeoutTimer?: NodeJS.Timer
   private accordion: HTMLBalAccordionElement | null = null
+  private tabsId = `bal-tabs-${TabsIds++}`
 
   @State() tabsOptions: BalTabOption[] = []
   @State() lineWidth = 0
@@ -206,7 +207,7 @@ export class Tabs {
   }
 
   private get tabs(): HTMLBalTabItemElement[] {
-    return Array.from(this.el.querySelectorAll('bal-tab-item'))
+    return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`))
   }
 
   private async updateTabs() {
@@ -393,6 +394,7 @@ export class Tabs {
             ></Tabs>
           </div>
           <div
+            id={this.tabsId}
             class={{
               'column': this.interface !== 'meta' && this.interface !== 'navigation',
               'is-full': !isVertical,
@@ -408,3 +410,5 @@ export class Tabs {
     )
   }
 }
+
+let TabsIds = 0