From 0bbc62552cece152638437bef85c4bb1346586d5 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 22 Nov 2024 09:47:13 +0100
Subject: [PATCH] fix: issue with tab-item for stencil

---
 .../src/components/tab-item/tab-item.lite.tsx       | 13 +++++++++++--
 showcases/e2e/default.ts                            |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index a29a50c13bb..4ff0f14715d 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import type { DBTabItemProps, DBTabItemState } from './model';
-import { cls } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -30,7 +30,16 @@ export default function DBTabItem(props: DBTabItemProps) {
 			}
 
 			// We have different ts types in different frameworks, so we need to use any here
-			state._selected = (event.target as any)?.['checked'];
+
+			useTarget({
+				stencil: () => {
+					const selected = (event.target as any)?.['checked'];
+					state._selected = getBooleanAsString(selected);
+				},
+				default: () => {
+					state._selected = (event.target as any)?.['checked'];
+				}
+			});
 
 			useTarget({
 				angular: () => handleFrameworkEvent(this, event, 'checked'),
diff --git a/showcases/e2e/default.ts b/showcases/e2e/default.ts
index c47b32742e7..50b2aaea68a 100644
--- a/showcases/e2e/default.ts
+++ b/showcases/e2e/default.ts
@@ -223,6 +223,8 @@ export const runAriaSnapshotTest = ({
 			await preScreenShot(page);
 		}
 
+		await page.waitForTimeout(1000); // We wait a little bit until everything loaded
+
 		const snapshot = await page.locator('main').ariaSnapshot();
 		expect(snapshot).toMatchSnapshot(`${title}.yaml`);
 	});