fix(DBCustomSelect): form reset functionality

.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.

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

@@ -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/src/components/checkbox/checkbox.lite.tsx

@@ -26,6 +26,7 @@ import {
 	uuid
 } from '../../utils';
 import {
+	addCheckedResetEventListener,
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
@@ -87,10 +88,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 +193,22 @@ 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
+			});
+			addCheckedResetEventListener(
+				_ref,
+				{ checked: props.checked, defaultChecked },
+				(event) => {
+					state.handleChange(event, true);
+				}
+			);
+		}
+	}, [_ref]);
 	// jscpd:ignore-end
 
 	return (

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

@@ -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/React.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/Vue.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/custom-select/custom-select.lite.tsx

@@ -48,6 +48,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';
@@ -750,6 +751,21 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		}
 	}, [state._values, selectRef]);
 
+	onUpdate(() => {
+		if (selectRef) {
+			const initialValues = props.values;
+			addResetEventListener(selectRef, () => {
+				const resetValue = initialValues
+					? initialValues
+					: selectRef.value
+						? [selectRef.value]
+						: [];
+				state.handleOptionSelected(resetValue);
+				state.handleValidation();
+			});
+		}
+	}, [selectRef]);
+
 	onUpdate(() => {
 		state._validity = props.validation;
 	}, [props.validation]);

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

@@ -41,6 +41,7 @@ import {
 	uuid
 } from '../../utils';
 import {
+	addValueResetEventListener,
 	handleFrameworkEventAngular,
 	handleFrameworkEventVue
 } from '../../utils/form-components';
@@ -106,8 +107,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 +137,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 +225,23 @@ 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
+			});
+			addValueResetEventListener(
+				_ref,
+				{ value: props.value, defaultValue },
+				(event) => {
+					state.handleChange(event, true);
+					state.handleInput(event, true);
+				}
+			);
+		}
+	}, [_ref]);
+
 	return (
 		<div
 			class={cls('db-input', props.className)}

packages/components/src/components/input/input.spec.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');

packages/components/src/components/radio/model.ts

@@ -9,13 +9,16 @@ import {
 	GlobalProps,
 	GlobalState,
 	InitializedState,
+	InputEventProps,
+	InputEventState,
 	SizeProps
 } from '../../shared/model';
 
 export type DBRadioDefaultProps = {};
 
 export type DBRadioProps = DBRadioDefaultProps &
 	GlobalProps &
+	InputEventProps<HTMLInputElement> &
 	ChangeEventProps<HTMLInputElement> &
 	FocusEventProps<HTMLInputElement> &
 	FormProps &
@@ -26,6 +29,7 @@ export type DBRadioDefaultState = {};
 
 export type DBRadioState = DBRadioDefaultState &
 	GlobalState &
+	InputEventState<HTMLInputElement> &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
 	FormState &