fix: add event listener guard

Author: milan-w

packages/components/src/components/tab-item/model.ts

@@ -49,6 +49,7 @@ export type DBTabItemProps = GlobalProps &
 
 export type DBTabItemDefaultState = {
 	_selected: boolean;
+	_listenerAdded: boolean;
 };
 
 export type DBTabItemState = DBTabItemDefaultState &

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

@@ -45,6 +45,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 		_selected: false,
 		_name: undefined,
 		initialized: false,
+		_listenerAdded: false,
 		handleNameAttribute: () => {
 			if (_ref) {
 				const setAttribute = _ref.setAttribute;
@@ -62,17 +63,6 @@ export default function DBTabItem(props: DBTabItemProps) {
 				props.onChange(event);
 			}
 
-			if (_ref.checked && !state._selected) {
-				useTarget({
-					stencil: () => {
-						state._selected = getBooleanAsString(true);
-					},
-					default: () => {
-						state._selected = true;
-					}
-				});
-			}
-
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(state, event, 'checked'),
@@ -92,12 +82,15 @@ export default function DBTabItem(props: DBTabItemProps) {
 			state.initialized = false;
 
 			// deselect this tab when another tab in tablist is selected
-			_ref.closest('[role=tablist]')?.addEventListener(
-				'change',
-				setSelectedOnChange
-			);
+			if (!state._listenerAdded) {
+				_ref.closest('[role=tablist]')?.addEventListener(
+					'change',
+					setSelectedOnChange
+				);
+				state._listenerAdded = true;
+			}
 
-			if (props.active) {
+			if (props.active || _ref.checked) {
 				useTarget({
 					stencil: () => {
 						state._selected = getBooleanAsString(true);
@@ -118,11 +111,12 @@ export default function DBTabItem(props: DBTabItemProps) {
 	}, [props.name]);
 
 	onUnMount(() => {
-		if (state.initialized && _ref) {
+		if (state._listenerAdded && _ref) {
 			_ref.closest('[role=tablist]')?.removeEventListener(
 				'change',
 				setSelectedOnChange
 			);
+			state._listenerAdded = false;
 		}
 	});
 

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

@@ -8,23 +8,27 @@ import { DBTabItem } from '../tab-item';
 import { DBTabList } from '../tab-list';
 import { DBTabPanel } from '../tab-panel';
 
-let tabIndex: number;
+let tabIndex: number | undefined;
+let comp: any;
 
-const comp: any = (
-	<DBTabs onIndexChange={(index: number) => (tabIndex = index)}>
-		<DBTabList>
-			<DBTabItem data-testid="test">Test 1</DBTabItem>
-			<DBTabItem data-testid="test2">Test 2</DBTabItem>
-			<DBTabItem>Test 3</DBTabItem>
-		</DBTabList>
+test.beforeEach(() => {
+	tabIndex = undefined;
+	comp = (
+		<DBTabs onIndexChange={(index: number) => (tabIndex = index)}>
+			<DBTabList>
+				<DBTabItem data-testid="test">Test 1</DBTabItem>
+				<DBTabItem data-testid="test2">Test 2</DBTabItem>
+				<DBTabItem>Test 3</DBTabItem>
+			</DBTabList>
 
-		<DBTabPanel>TestPanel 1</DBTabPanel>
+			<DBTabPanel>TestPanel 1</DBTabPanel>
 
-		<DBTabPanel>TestPanel 2</DBTabPanel>
+			<DBTabPanel>TestPanel 2</DBTabPanel>
 
-		<DBTabPanel>TestPanel 3</DBTabPanel>
-	</DBTabs>
-);
+			<DBTabPanel>TestPanel 3</DBTabPanel>
+		</DBTabs>
+	);
+});
 
 const testComponent = () => {
 	test('should contain text', async ({ mount }) => {