fix: move tab-item selectedOnChange function to state

Author: milan-w

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

@@ -50,6 +50,7 @@ export type DBTabItemProps = GlobalProps &
 export type DBTabItemDefaultState = {
 	_selected: boolean;
 	_listenerAdded: boolean;
+	setSelectedOnChange: (event: any) => void;
 };
 
 export type DBTabItemState = DBTabItemDefaultState &

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

@@ -29,18 +29,6 @@ useDefaultProps<DBTabItemProps>({});
 export default function DBTabItem(props: DBTabItemProps) {
 	const _ref = useRef<HTMLInputElement | any>(null);
 
-	function setSelectedOnChange(event: any) {
-		event.stopPropagation();
-		useTarget({
-			stencil: () => {
-				state._selected = getBooleanAsString(event.target === _ref);
-			},
-			default: () => {
-				state._selected = event.target === _ref;
-			}
-		});
-	}
-
 	// jscpd:ignore-start
 	const state = useStore<DBTabItemState>({
 		_selected: false,
@@ -58,6 +46,18 @@ export default function DBTabItem(props: DBTabItemProps) {
 				};
 			}
 		},
+		setSelectedOnChange: (event: any) => {
+			event.stopPropagation();
+			console.log('setSelectedOnChange', event.target === _ref);
+			useTarget({
+				stencil: () => {
+					state._selected = getBooleanAsString(event.target === _ref);
+				},
+				default: () => {
+					state._selected = event.target === _ref;
+				}
+			});
+		},
 		handleChange: (event: any) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -77,20 +77,23 @@ export default function DBTabItem(props: DBTabItemProps) {
 	// jscpd:ignore-end
 
 	onUpdate(() => {
+		console.log('onUpdate triggered', state.initialized, _ref);
 		if (state.initialized && _ref) {
 			useTarget({ react: () => state.handleNameAttribute() });
 			state.initialized = false;
 
 			// deselect this tab when another tab in tablist is selected
 			if (!state._listenerAdded) {
+				console.log('adding listener');
 				_ref.closest('[role=tablist]')?.addEventListener(
 					'change',
-					setSelectedOnChange
+					state.setSelectedOnChange
 				);
 				state._listenerAdded = true;
 			}
 
 			if (props.active || _ref.checked) {
+				console.log('active or checked', props.active, _ref.checked);
 				useTarget({
 					stencil: () => {
 						state._selected = getBooleanAsString(true);
@@ -112,9 +115,10 @@ export default function DBTabItem(props: DBTabItemProps) {
 
 	onUnMount(() => {
 		if (state._listenerAdded && _ref) {
+			console.log('removing listener');
 			_ref.closest('[role=tablist]')?.removeEventListener(
 				'change',
-				setSelectedOnChange
+				state.setSelectedOnChange
 			);
 			state._listenerAdded = false;
 		}