diff --git a/.changeset/gorgeous-glasses-end.md b/.changeset/gorgeous-glasses-end.md new file mode 100644 index 0000000000..9c85b5a1f4 --- /dev/null +++ b/.changeset/gorgeous-glasses-end.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Fix tab isolation in nested `post-tabs` components by scoping tab queries and interactions to the current instance. diff --git a/packages/components/src/components/post-tabs/post-tabs.tsx b/packages/components/src/components/post-tabs/post-tabs.tsx index b6d6d03510..1f911ad035 100644 --- a/packages/components/src/components/post-tabs/post-tabs.tsx +++ b/packages/components/src/components/post-tabs/post-tabs.tsx @@ -20,9 +20,11 @@ export class PostTabs { private hiding: Animation; private isLoaded = false; - private get tabs(): NodeListOf { - return this.host.querySelectorAll('post-tab-header'); - } + private get tabs(): HTMLPostTabHeaderElement[] { + return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => + tab.closest('post-tabs') === this.host + ); + } @Element() host: HTMLPostTabsElement; @@ -44,7 +46,7 @@ export class PostTabs { this.moveMisplacedTabs(); this.enableTabs(); - const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel; + const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel; void this.show(initiallyActivePanel); this.isLoaded = true; @@ -127,7 +129,7 @@ export class PostTabs { // if the currently active tab was removed from the DOM then select the first one if (this.activeTab && !this.activeTab.isConnected) { - void this.show(this.tabs.item(0).panel); + void this.show(this.tabs[0]?.panel); } }