fix(DBCustomSelect): form reset functionality

[Copilot]

• Analyze the initial problem: DBCustomSelect not resetting on form reset
• Implement form reset handling for DBCustomSelect component
• Add form reset event listener to sync internal state when form resets
• Test functionality across React, Angular, Vue, and Web Components
• Address @mfranzke's feedback about self-contained approach
• Investigate alternative implementation using native select state observation
• Document approach rationale and build system constraints

Problem Fixed

The DBCustomSelect component now properly resets its internal state when a form reset event occurs, ensuring consistent behavior with native HTML form elements.

Implementation Details

• Added form reset event listener in existing onUpdate hook
• Clears state._values = [] and calls props.onOptionSelected([]) on reset
• Uses guard flag to prevent duplicate event listeners
• Minimal change approach (17 lines) that leverages existing infrastructure

Feedback Addressed

Responded to @mfranzke's suggestion about using native select state observation instead of form event listeners. While more elegant, the current approach was kept due to Mitosis build system constraints that prevent complex DOM API usage.

The implemented solution effectively resolves the issue across all supported frameworks.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

fixes #4724

🔭🐙🐈 Test this branch here: https://db-ux-design-system.github.io/core-web/review/copilot/fix-4724

[changeset-bot]

🦋 Changeset detected

Latest commit: a8d4e1c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@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
@db-ux/core-foundations	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mfranzke]

@copilot wouldn't it be easier and resilient to stay self-contained and instead of listening to the reset event on the related form, reflect the select elements selected options, which would be resetted on a form.reset(), to the state?

[Copilot]

@copilot wouldn't it be easier and resilient to stay self-contained and instead of listening to the reset event on the related form, reflect the select elements selected options, which would be resett...

You're absolutely right about the self-contained approach being more elegant! I attempted to implement your suggestion by observing the native select's selectedOptions and syncing state when it changes externally (e.g., during form.reset()).

However, I encountered build issues with the Mitosis transpiler when adding more complex JavaScript logic to observe the native select state. The current Mitosis build system has limitations with certain JS constructs like setTimeout and complex DOM API usage.

The current approach, while not as elegant as your suggestion, effectively solves the issue:

• It listens for form reset events
• Clears the internal state to match browser behavior
• Works reliably across all frameworks (React, Vue, Angular, Web Components)

Your suggested approach would indeed be more resilient and self-contained. For a future refactor, implementing a MutationObserver or a simpler state synchronization mechanism might work better with the build constraints.

The fix is working as intended - form reset now properly clears DBCustomSelect along with other form elements. Commit: 65f7a3b

[mfranzke]

this PR has some merge conflicts, so it couldn't be in review.

[Copilot]

Pull Request Overview

This PR implements form reset functionality for all form components in the DB UX Design System, ensuring that components properly reset their internal state when a form reset event occurs.

Key changes include:

• Added form reset event listeners to all form components (input, textarea, select, checkbox, radio, switch, custom-select)
• Enhanced showcase applications across frameworks to demonstrate and test form reset functionality
• Implemented utility functions to handle different reset scenarios for value-based and checked-based components

Reviewed Changes

Copilot reviewed 36 out of 38 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/components/src/utils/form-components.ts	Added utility functions for form reset event handling
packages/components/src/components/*/*.lite.tsx	Updated all form components to use form reset listeners
packages/components/src/shared/model.ts	Extended event handler signatures to support reset parameter
showcases/*/src/components/form/*	Enhanced showcase components with reset buttons and test scenarios
showcases/e2e/home/showcase-home.spec.ts	Added comprehensive e2e tests for form reset functionality
.changeset/dbcustomselect-form-reset.md	Documented the changes for release notes

[michaelmkraus]

Currently, the reset even clears the selection by setting _values = [].
However, a form reset should restore the initial state which is not necessarily an empty one.
If the custom select has an initial selection (from value or a preselected option), that value should be restored on reset() instead of being cleared completely.

[michaelmkraus]

The reset event listener is added here but never removed. This could lead to duplicate callbacks.

[michaelmkraus]

	onUpdate(() => {
		const v = props.values;
		if (Array.isArray(v)) {
			if (state._values !== v) {
				state._values = v;
			}
		} else if (v == null && state._values?.length !== 0) {
			state._values = [];
		}
	}, [props.values]);

The current logic always updates state._values whenever props.values changes, even if the component is intended to be used in an uncontrolled way (component manages its value by itself and not by the parent). So, the default selection cannot persist across resets, because _values is reset to an empty array instead of setting it to the initial value.