fix: removed stopPropagation for every event to fix issue with <form> (#4280)

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>

Author: nmerget

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

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

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

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

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

@@ -85,7 +85,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -98,13 +97,11 @@ 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/drawer/drawer.lite.tsx

@@ -21,13 +21,17 @@ export default function DBDrawer(props: DBDrawerProps) {
 	const dialogContainerRef = useRef<HTMLDivElement | any>(null);
 	const state = useStore<DBDrawerState>({
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		handleClose: (event: any) => {
+		handleClose: (event: any, forceClose?: boolean) => {
 			if (event.key === 'Escape') {
 				event.preventDefault();
 			}
 
+			if (forceClose) {
+				event.stopPropagation();
+			}
+
 			if (
-				event === 'close' ||
+				forceClose ||
 				event.key === 'Escape' ||
 				(event.target.nodeName === 'DIALOG' &&
 					event.type === 'click' &&
@@ -103,7 +107,7 @@ export default function DBDrawer(props: DBDrawerProps) {
 						icon="cross"
 						variant="ghost"
 						noText
-						onClick={() => state.handleClose('close')}>
+						onClick={(event) => state.handleClose(event, true)}>
 						{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
 					</DBButton>
 				</header>

packages/components/src/components/header/header.lite.tsx

@@ -25,7 +25,11 @@ export default function DBHeader(props: DBHeaderProps) {
 		_id: DEFAULT_ID,
 		initialized: false,
 		forcedToMobile: false,
-		handleToggle: () => {
+		handleToggle: (event?: any) => {
+			if (event && event.stopPropagation) {
+				event.stopPropagation();
+			}
+
 			const open = !getBoolean(props.drawerOpen, 'drawerOpen');
 
 			if (props.onToggle) {

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

@@ -101,7 +101,6 @@ export default function DBInput(props: DBInputProps) {
 			}
 		},
 		handleInput: (event: InputEvent<HTMLInputElement>) => {
-			event.stopPropagation();
 			useTarget({
 				vue: () => {
 					if (props.input) {
@@ -125,7 +124,6 @@ export default function DBInput(props: DBInputProps) {
 			state.handleValidation();
 		},
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -137,13 +135,11 @@ 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

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

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

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

@@ -96,12 +96,10 @@ export default function DBSelect(props: DBSelectProps) {
 		},
 		handleClick: (event: ClickEvent<HTMLSelectElement> | any) => {
 			if (props.onClick) {
-				event.stopPropagation();
 				props.onClick(event);
 			}
 		},
 		handleInput: (event: InputEvent<HTMLSelectElement> | any) => {
-			event.stopPropagation();
 			useTarget({
 				vue: () => {
 					if (props.input) {
@@ -125,7 +123,6 @@ export default function DBSelect(props: DBSelectProps) {
 			state.handleValidation();
 		},
 		handleChange: (event: ChangeEvent<HTMLSelectElement> | any) => {
-			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -137,13 +134,11 @@ 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,7 +40,6 @@ export default function DBSwitch(props: DBSwitchProps) {
 			default: false
 		}),
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			event.stopPropagation();
 			if (props.onChange) {
 				props.onChange(event);
 			}
@@ -55,13 +54,11 @@ 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);
 			}