fix: issue with events triggering twice in angular (#4135)

Author: nmerget

packages/components/src/components/button/button.lite.tsx

@@ -22,6 +22,7 @@ export default function DBButton(props: DBButtonProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
+			event.stopPropagation();
 			if (props.onClick) {
 				props.onClick(event);
 			}

packages/components/src/components/card/card.lite.tsx

@@ -17,6 +17,7 @@ export default function DBCard(props: DBCardProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
 		handleClick: (event: ClickEvent<HTMLElement>) => {
+			event.stopPropagation();
 			if (props.onClick) {
 				props.onClick(event);
 			}

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -85,6 +85,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -97,11 +98,13 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			state.handleValidation();
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
 		},
 		handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onFocus) {
 				props.onFocus(event);
 			}

packages/components/src/components/input/input.lite.tsx

@@ -100,6 +100,7 @@ export default function DBInput(props: DBInputProps) {
 			}
 		},
 		handleInput: (event: InputEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			useTarget({
 				vue: () => {
 					if (props.input) {
@@ -123,6 +124,7 @@ export default function DBInput(props: DBInputProps) {
 			state.handleValidation();
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -134,11 +136,13 @@ export default function DBInput(props: DBInputProps) {
 			state.handleValidation();
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
 		},
 		handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onFocus) {
 				props.onFocus(event);
 			}

packages/components/src/components/link/link.lite.tsx

@@ -18,6 +18,7 @@ export default function DBLink(props: DBLinkProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBLinkState>({
 		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
+			event.stopPropagation();
 			if (props.onClick) {
 				props.onClick(event);
 			}

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

@@ -50,6 +50,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			}
 		},
 		handleClick: (event: ClickEvent<HTMLButtonElement> | any) => {
+			event.stopPropagation();
 			if (props.onClick) {
 				props.onClick(event);
 			}

packages/components/src/components/notification/notification.lite.tsx

@@ -21,6 +21,7 @@ export default function DBNotification(props: DBNotificationProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBNotificationState>({
 		handleClose: (event: ClickEvent<HTMLButtonElement> | any) => {
+			event.stopPropagation();
 			if (props.onClose) {
 				props.onClose(event);
 			}

packages/components/src/components/radio/radio.lite.tsx

@@ -30,6 +30,7 @@ export default function DBRadio(props: DBRadioProps) {
 		initialized: false,
 		_id: undefined,
 		handleChange: (event: ChangeEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -40,11 +41,13 @@ export default function DBRadio(props: DBRadioProps) {
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
 		},
 		handleFocus: (event: InteractionEvent<HTMLInputElement> | any) => {
+			event.stopPropagation();
 			if (props.onFocus) {
 				props.onFocus(event);
 			}

packages/components/src/components/select/select.lite.tsx

@@ -95,11 +95,13 @@ export default function DBSelect(props: DBSelectProps) {
 			}
 		},
 		handleClick: (event: ClickEvent<HTMLSelectElement> | any) => {
+			event.stopPropagation();
 			if (props.onClick) {
 				props.onClick(event);
 			}
 		},
 		handleInput: (event: InputEvent<HTMLSelectElement> | any) => {
+			event.stopPropagation();
 			useTarget({
 				vue: () => {
 					if (props.input) {
@@ -123,6 +125,7 @@ export default function DBSelect(props: DBSelectProps) {
 			state.handleValidation();
 		},
 		handleChange: (event: ChangeEvent<HTMLSelectElement> | any) => {
+			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -134,11 +137,13 @@ export default function DBSelect(props: DBSelectProps) {
 			state.handleValidation();
 		},
 		handleBlur: (event: InteractionEvent<HTMLSelectElement> | any) => {
+			event.stopPropagation();
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
 		},
 		handleFocus: (event: InteractionEvent<HTMLSelectElement> | any) => {
+			event.stopPropagation();
 			if (props.onFocus) {
 				props.onFocus(event);
 			}

packages/components/src/components/switch/switch.lite.tsx

@@ -40,6 +40,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 			default: false
 		}),
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -54,11 +55,13 @@ export default function DBSwitch(props: DBSwitchProps) {
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			if (props.onBlur) {
 				props.onBlur(event);
 			}
 		},
 		handleFocus: (event: InteractionEvent<HTMLInputElement>) => {
+			event.stopPropagation();
 			if (props.onFocus) {
 				props.onFocus(event);
 			}