fix(DBCustomSelect): form reset functionality (#4853)

* Initial plan

* Initial analysis of DBCustomSelect form reset issue

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

* Implement form reset handling for DBCustomSelect

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

* Successful test validation of DBCustomSelect form reset fix

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

* feat: add form reset for every form component

* fix: linting issues

* refactor: formatting

* fix: linting issues

* fix: typescript issue

* chore: add changeset

* fix: issue with react showcase

* auto update snapshots (#5082)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: issue with showcase-home.spec.ts

* auto update snapshots (#5145)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* auto update snapshots (#5146)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* auto update snapshots (#5173)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: issues with onChange handler for angular
chore: add tests for switch

* fix: linting issues

* Update showcases/vue-showcase/src/components/form/Custom-Selects.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>
Co-authored-by: Maximilian Franzke <maximilian.franzke@deutschebahn.com>
Co-authored-by: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 5 people

.changeset/dbcustomselect-form-reset.md

@@ -0,0 +1,14 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/v-core-components": patch
+"@db-ux/wc-core-components": patch
+---
+
+fix(DBCustomSelect): automatically handle form reset events
+
+An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+This listener detects form resets and updates the component's internal value/checked state accordingly.
+
+> **Note**: This does not work for `ngModel` in Angular.

__snapshots__/radio/patternhub/radio-properties-should-match-screenshot.png

@@ -178,6 +178,12 @@ export const getComponents = (): Component[] => [
 					to: '{{value()}}</textarea>'
 				}
 			],
+			vue: [
+				{
+					from: '</textarea>',
+					to: '{{value}}</textarea>'
+				}
+			],
 			react: [{ from: /HTMLAttributes/g, to: 'TextareaHTMLAttributes' }],
 			stencil: [{ from: 'HTMLElement', to: 'HTMLTextAreaElement' }]
 		}
@@ -214,9 +220,7 @@ export const getComponents = (): Component[] => [
 	{
 		name: 'select',
 		overwrites: {
-			angular: [
-				{ from: '<HTMLElement>', to: '<HTMLSelectElement>' }
-			],
+			angular: [{ from: '<HTMLElement>', to: '<HTMLSelectElement>' }],
 			react: [
 				// React not allowing selected for options
 				{ from: 'selected={option.selected}', to: '' },

packages/components/scripts/post-build/components.ts

@@ -1,5 +1,6 @@
 import {
 	onMount,
+	onUnMount,
 	onUpdate,
 	Show,
 	useDefaultProps,
@@ -26,6 +27,7 @@ import {
 	uuid
 } from '../../utils';
 import {
+	addCheckedResetEventListener,
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
@@ -55,6 +57,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		_invalidMessage: undefined,
 		_descByIds: undefined,
 		_voiceOverFallback: '',
+		abortController: undefined,
 		hasValidState: () => {
 			return !!(props.validMessage ?? props.validation === 'valid');
 		},
@@ -87,10 +90,25 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				state._descByIds = undefined;
 			}
 		},
-		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			if (props.onChange) {
-				props.onChange(event);
-			}
+		handleChange: (
+			event: ChangeEvent<HTMLInputElement>,
+			reset?: boolean
+		) => {
+			useTarget({
+				angular: () => {
+					if (props.onChange) {
+						// We need to split the if statements for generation
+						if (reset) {
+							props.onChange(event);
+						}
+					}
+				},
+				default: () => {
+					if (props.onChange) {
+						props.onChange(event);
+					}
+				}
+			});
 
 			useTarget({
 				angular: () =>
@@ -177,6 +195,34 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			state.initialized = false;
 		}
 	}, [state.initialized, _ref, props.checked]);
+
+	onUpdate(() => {
+		if (_ref) {
+			const defaultChecked = useTarget({
+				react: (props as any).defaultChecked,
+				default: undefined
+			});
+
+			let controller = state.abortController;
+			if (!controller) {
+				controller = new AbortController();
+				state.abortController = controller;
+			}
+
+			addCheckedResetEventListener(
+				_ref,
+				{ checked: props.checked, defaultChecked },
+				(event) => {
+					state.handleChange(event, true);
+				},
+				controller.signal
+			);
+		}
+	}, [_ref]);
+
+	onUnMount(() => {
+		state.abortController?.abort();
+	});
 	// jscpd:ignore-end
 
 	return (

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

@@ -32,6 +32,8 @@ To add a descriptive text with HTML formatting (e.g., bold or italic text) to a
 		/>
 		Label
 	</label>
-	<p class="db-infotext" id="checkbox-message">Example <strong>Text</strong></p>
+	<p class="db-infotext" id="checkbox-message">
+		Example <strong>Text</strong>
+	</p>
 </body>
 ```

packages/components/src/components/checkbox/docs/HTML.md

@@ -47,7 +47,7 @@ const App = () => {
 
 			{/* The DBInfotext component holds the formatted message. */}
 			<DBInfotext id="checkbox-message">
-			Example <strong>Text</strong>
+				Example <strong>Text</strong>
 			</DBInfotext>
 		</div>
 	);

packages/components/src/components/checkbox/docs/React.md

@@ -33,6 +33,8 @@ import { DBCheckbox, DBInfotext } from "@db-ux/v-core-components";
 		Example Checkbox
 	</DBCheckbox>
 
-	<DBInfotext id="checkbox-message"> Example <strong>Text</strong> </DBInfotext>
+	<DBInfotext id="checkbox-message">
+		Example <strong>Text</strong>
+	</DBInfotext>
 </template>
 ```

packages/components/src/components/checkbox/docs/Vue.md

@@ -2,6 +2,7 @@
 import {
 	For,
 	onMount,
+	onUnMount,
 	onUpdate,
 	Show,
 	useDefaultProps,
@@ -48,6 +49,7 @@ import { DocumentClickListener } from '../../utils/document-click-listener';
 import { DocumentScrollListener } from '../../utils/document-scroll-listener';
 import { handleFixedDropdown } from '../../utils/floating-components';
 import {
+	addResetEventListener,
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
@@ -103,6 +105,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		_infoTextId: undefined,
 		_validity: 'no-validation',
 		_userInteraction: false,
+		abortController: undefined,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
 		_descByIds: undefined,
 		_selectedLabels: '',
@@ -750,6 +753,31 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		}
 	}, [state._values, selectRef]);
 
+	onUpdate(() => {
+		if (selectRef) {
+			let controller = state.abortController;
+			if (!controller) {
+				controller = new AbortController();
+				state.abortController = controller;
+			}
+
+			const initialValues = props.values;
+			addResetEventListener(
+				selectRef,
+				() => {
+					const resetValue = initialValues
+						? initialValues
+						: selectRef.value
+							? [selectRef.value]
+							: [];
+					state.handleOptionSelected(resetValue);
+					state.handleValidation();
+				},
+				controller.signal
+			);
+		}
+	}, [selectRef]);
+
 	onUpdate(() => {
 		state._validity = props.validation;
 	}, [props.validation]);
@@ -853,6 +881,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			DEFAULT_INVALID_MESSAGE;
 	}, [selectRef, props.invalidMessage]);
 
+	onUnMount(() => {
+		state.abortController?.abort();
+	});
+
 	function satisfyReact(event: any) {
 		// This is a function to satisfy React
 		event.stopPropagation();

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

@@ -1,6 +1,7 @@
 import {
 	For,
 	onMount,
+	onUnMount,
 	onUpdate,
 	Show,
 	useDefaultProps,
@@ -41,6 +42,7 @@ import {
 	uuid
 } from '../../utils';
 import {
+	addValueResetEventListener,
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
@@ -71,6 +73,7 @@ export default function DBInput(props: DBInputProps) {
 		_descByIds: undefined,
 		_value: undefined,
 		_voiceOverFallback: '',
+		abortController: undefined,
 		hasValidState: () => {
 			return !!(props.validMessage ?? props.validation === 'valid');
 		},
@@ -106,8 +109,15 @@ export default function DBInput(props: DBInputProps) {
 				state._descByIds = undefined;
 			}
 		},
-		handleInput: (event: InputEvent<HTMLInputElement>) => {
+		handleInput: (event: InputEvent<HTMLInputElement>, reset?: boolean) => {
 			useTarget({
+				angular: () => {
+					if (props.onInput) {
+						if (reset) {
+							props.onInput(event);
+						}
+					}
+				},
 				vue: () => {
 					if (props.input) {
 						props.input(event);
@@ -129,10 +139,25 @@ export default function DBInput(props: DBInputProps) {
 			});
 			state.handleValidation();
 		},
-		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			if (props.onChange) {
-				props.onChange(event);
-			}
+		handleChange: (
+			event: ChangeEvent<HTMLInputElement>,
+			reset?: boolean
+		) => {
+			useTarget({
+				angular: () => {
+					if (props.onChange) {
+						// We need to split the if statements for generation
+						if (reset) {
+							props.onChange(event);
+						}
+					}
+				},
+				default: () => {
+					if (props.onChange) {
+						props.onChange(event);
+					}
+				}
+			});
 
 			useTarget({
 				angular: () => handleFrameworkEventAngular(state, event),
@@ -202,6 +227,35 @@ export default function DBInput(props: DBInputProps) {
 		state._value = props.value;
 	}, [props.value]);
 
+	onUpdate(() => {
+		if (_ref) {
+			const defaultValue = useTarget({
+				react: (props as any).defaultValue,
+				default: undefined
+			});
+
+			let controller = state.abortController;
+			if (!controller) {
+				controller = new AbortController();
+				state.abortController = controller;
+			}
+
+			addValueResetEventListener(
+				_ref,
+				{ value: props.value, defaultValue },
+				(event) => {
+					state.handleChange(event, true);
+					state.handleInput(event, true);
+				},
+				controller.signal
+			);
+		}
+	}, [_ref]);
+
+	onUnMount(() => {
+		state.abortController?.abort();
+	});
+
 	return (
 		<div
 			class={cls('db-input', props.className)}

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

@@ -50,7 +50,9 @@ const testAction = () => {
 		expect(test).toEqual('test');
 	});
 
-	test('should have enterkeyhint attribute when provided', async ({ mount }) => {
+	test('should have enterkeyhint attribute when provided', async ({
+		mount
+	}) => {
 		const component = await mount(
 			<DBInput label="Label" enterkeyhint="done" />
 		);
@@ -66,12 +68,10 @@ const testAction = () => {
 		await expect(input).toHaveAttribute('inputmode', 'numeric');
 	});
 
-
-
-	test('should not have enterkeyhint or inputmode when not provided', async ({ mount }) => {
-		const component = await mount(
-			<DBInput label="Label" type="text" />
-		);
+	test('should not have enterkeyhint or inputmode when not provided', async ({
+		mount
+	}) => {
+		const component = await mount(<DBInput label="Label" type="text" />);
 		const input = component.getByRole('textbox');
 		await expect(input).not.toHaveAttribute('enterkeyhint');
 		await expect(input).not.toHaveAttribute('inputmode');