diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx index 8b086953b9..05eb9c772d 100644 --- a/packages/components/src/components/tab-header/tab-header.tsx +++ b/packages/components/src/components/tab-header/tab-header.tsx @@ -65,6 +65,7 @@ export class TabHeader { return; } this.selected = true; + this.scaleSelect.emit(); } @Watch('selected') diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx index 0724cfb51a..6d4416e32a 100644 --- a/packages/components/src/components/tab-nav/tab-nav.tsx +++ b/packages/components/src/components/tab-nav/tab-nav.tsx @@ -95,9 +95,8 @@ export class TabNav { customElements.whenDefined('scale-tab-header'), customElements.whenDefined('scale-tab-panel'), ]).then(() => { - this.linkPanels(); + this.linkPanelsAndSelectTab(); this.propagateSizeToTabs(); - this.selectNextTab(); }); if (this.small !== false) { @@ -148,13 +147,14 @@ export class TabNav { return tabs[tabs.length - 1]; } - linkPanels() { + linkPanelsAndSelectTab() { const tabs = this.getAllTabs(); tabs.forEach((tab) => { const panel = tab.nextElementSibling; tab.setAttribute('aria-controls', panel.id); panel.setAttribute('aria-labelledby', tab.id); }); + this.selectNextTab(); } selectNextTab(nextTab?: HTMLScaleTabHeaderElement): void {