fix: pass correct tab item index from DBTab parent to child

set child active after event registered, remove event listerner on unmount

Author: milan-w

packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -1,5 +1,6 @@
 import {
 	onMount,
+	onUnMount,
 	onUpdate,
 	Show,
 	useDefaultProps,
@@ -28,6 +29,10 @@ useDefaultProps<DBTabItemProps>({});
 export default function DBTabItem(props: DBTabItemProps) {
 	const _ref = useRef<HTMLInputElement | any>(null);
 
+	function setSelectedOnChange(event: any) {
+		state._selected = event.target === _ref;
+	}
+
 	// jscpd:ignore-start
 	const state = useStore<DBTabItemState>({
 		_selected: false,
@@ -65,20 +70,18 @@ export default function DBTabItem(props: DBTabItemProps) {
 
 	onUpdate(() => {
 		if (state.initialized && _ref) {
-			if (props.active) {
-				_ref.click();
-			}
-
 			useTarget({ react: () => state.handleNameAttribute() });
 			state.initialized = false;
 
 			// deselect this tab when another tab in tablist is selected
 			_ref.closest('[role=tablist]')?.addEventListener(
 				'change',
-				(event: any) => {
-					state._selected = event.target === _ref;
-				}
+				setSelectedOnChange
 			);
+
+			if (props.active) {
+				_ref.click();
+			}
 		}
 	}, [_ref, state.initialized]);
 
@@ -88,6 +91,13 @@ export default function DBTabItem(props: DBTabItemProps) {
 		}
 	}, [props.name]);
 
+	onUnMount(() => {
+		_ref.closest('[role=tablist]')?.removeEventListener(
+			'change',
+			setSelectedOnChange
+		);
+	});
+
 	return (
 		<li class={cls('db-tab-item', props.className)} role="none">
 			<label

packages/components/src/components/tabs/tabs.lite.tsx

@@ -170,11 +170,11 @@ export default function DBTabs(props: DBTabsProps) {
 					if (tabItem) {
 						const list = tabItem.parentElement;
 						if (list) {
-							const indices = Array.from(list.childNodes).indexOf(
+							const tabIndex = Array.from(list.children).indexOf(
 								tabItem
 							);
 							if (props.onIndexChange) {
-								props.onIndexChange(indices);
+								props.onIndexChange(tabIndex);
 							}
 
 							if (props.onTabSelect) {

packages/components/src/components/tabs/tabs.spec.tsx

@@ -42,6 +42,9 @@ const testActions = () => {
 	test('should be clickable', async ({ mount }) => {
 		expect(tabIndex).toBe(undefined);
 
+		// Beware: the comments below actually change the selector for vue
+		// this is necessary because vue will not trigger a check on an list element but requires the actual
+		// radio button element, which has the role=tab
 		const component = await mount(comp);
 		await component
 			.getByTestId('test2')