Add dynamic handling for _tabs changes and E2E tests

Refs: #7390

Author: anicyne

packages/components/src/components/tabs/shadow.tsx

@@ -385,6 +385,7 @@ export class KolTabs implements TabsAPI {
 			{
 				hooks: {
 					beforePatch: this.syncSelectedAndTabs,
+					afterPatch: this.refreshTabPanels,
 				},
 			},
 		);
@@ -400,37 +401,43 @@ export class KolTabs implements TabsAPI {
 		this.validateBehavior(this._behavior);
 	}
 
-	private readonly handleTabPanels = () => {
-		if (this.tabPanelHost instanceof HTMLDivElement) {
-			for (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {
-				const div = document.createElement('div');
-				div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
-				div.setAttribute('id', `tabpanel-${i}`);
-				div.setAttribute('role', 'tabpanel');
-				div.setAttribute('hidden', '');
-				const slot = document.createElement('slot');
-				slot.setAttribute('name', `tabpanel-slot-${i}`);
-				div.appendChild(slot);
-				this.tabPanelHost.appendChild(div);
-				if (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {
-					// div.appendChild(this.host?.children[0]);
-					this.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
-				}
+	private refreshTabPanels = () => {
+		if (!this.tabPanelHost) return;
+		// Clear existing panels
+		while (this.tabPanelHost.firstChild) {
+			this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);
+		}
+		for (let i = 0; i < this.state._tabs?.length; i++) {
+			const div = document.createElement('div');
+			div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
+			div.setAttribute('id', `tabpanel-${i}`);
+			div.setAttribute('role', 'tabpanel');
+			div.setAttribute('hidden', '');
+			const slot = document.createElement('slot');
+			slot.setAttribute('name', `tabpanel-slot-${i}`);
+			div.appendChild(slot);
+			this.tabPanelHost?.appendChild(div);
+
+			if (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {
+				this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
 			}
 		}
+		this.updateVisiblePanel();
 	};
 
-	public componentDidRender(): void {
-		this.handleTabPanels();
-		if (this.tabPanelHost instanceof HTMLDivElement) {
-			for (let i = 0; i < this.tabPanelHost.children.length; i++) {
-				if (i !== this.state._selected) {
-					this.tabPanelHost.children[i].setAttribute('hidden', '');
-				} else {
-					this.tabPanelHost.children[i].removeAttribute('hidden');
-				}
+	private updateVisiblePanel = () => {
+		if (!this.tabPanelHost) return;
+		Array.from(this.tabPanelHost.children).forEach((child, i) => {
+			if (i === this.state._selected) {
+				child.removeAttribute('hidden');
+			} else {
+				child.setAttribute('hidden', '');
 			}
-		}
+		});
+	};
+
+	public componentDidRender(): void {
+		this.updateVisiblePanel();
 	}
 
 	private focusTabById(index: number): void {

packages/components/src/components/tabs/tabs.e2e.ts

@@ -0,0 +1,19 @@
+import { expect } from '@playwright/test';
+import { test } from '@stencil/playwright';
+
+test.describe('Dynamic Tabs', () => {
+	test('should update tabs when _tabs prop changes', async ({ page }) => {
+		const initialTabs = [{ _label: 'First tab' }, { _label: 'Second Tab' }];
+		await page.setContent(`<kol-tabs _tabs='${JSON.stringify(initialTabs)}' _label="Tabs"> <div>Content 1</div> <div>Content 2</div> </kol-tabs>`);
+		const kolTabs = page.locator('kol-tabs');
+		await expect(kolTabs.getByRole('tab', { name: 'First tab' })).toBeVisible();
+		await expect(kolTabs.getByRole('tab', { name: 'Second Tab' })).toBeVisible();
+		await kolTabs.evaluate((el: HTMLKolTabsElement) => {
+			el._tabs = JSON.stringify([{ _label: 'Updated Tab A' }, { _label: 'Updated Tab B' }, { _label: 'Updated Tab C' }]);
+		});
+		await expect(kolTabs.getByRole('tab', { name: 'Updated Tab A' })).toBeVisible();
+		await expect(kolTabs.getByRole('tab', { name: 'Updated Tab B' })).toBeVisible();
+		await expect(kolTabs.getByRole('tab', { name: 'Updated Tab C' })).toBeVisible();
+		await expect(kolTabs.getByRole('tab', { name: 'First tab' })).toHaveCount(0);
+	});
+});