fix(DB Switch): double event firing with Angular signals

[Copilot]

• Initial exploration and understanding of the DB Switch double event issue
• Identify root cause in handleFrameworkEventAngular function
• Implement initial fix for signal-based properties (checked and disabled)
• Remove unrelated package.json and test artifacts from PR
• Address architectural feedback about Angular ControlValueAccessor pattern
• Remove writeValue call entirely for user-initiated events
• Validate changes with build and tests
• Final validation and testing

Problem Solved

The DB Switch component was triggering change events twice when using Angular signals. The root cause was in handleFrameworkEventAngular which incorrectly called both propagateChange and writeValue during user-initiated events.

Solution Evolution

Initial approach: Only skipped writeValue for signal-based properties (checked, disabled)

Final approach: Completely removed writeValue call for all user-initiated events, following proper Angular ControlValueAccessor pattern:

• propagateChange: For view → model updates (user interactions) ✅
• writeValue: Only for model → view updates (programmatic changes) ✅

This architectural fix resolves the double event issue for all affected components while maintaining proper Angular forms integration.

Impact

• Components Fixed: db-switch, db-checkbox, db-tab-item, db-custom-select-list-item, db-input, db-textarea, db-select, db-radio, db-custom-select
• Backward Compatibility: Full compatibility maintained for reactive forms, template-driven forms, and ngModel
• Architecture: Now properly follows Angular ControlValueAccessor pattern

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

fixes #4599

[mfranzke]

@copilot I don't see a reason to modify package.json, package-lock.json or adding output/react/blob-report/report-d73910a.zip for this PR.

[Copilot]

@copilot I don't see a reason to modify package.json, package-lock.json or adding output/react/blob-report/report-d73910a.zip for this PR.

You're absolutely right. I've removed the unrelated package.json, package-lock.json changes and the test artifact blob-report file from the PR. The PR now contains only the essential fix for the DB Switch double event firing issue in form-components.ts, plus a .gitignore update to prevent future test artifacts from being committed. Fixed in commit 439d623.

[changeset-bot]

🦋 Changeset detected

Latest commit: b238811

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

This PR includes changesets to release 8 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

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

[Copilot]

Pull Request Overview

This PR fixes a double event firing issue in the DB Switch component when using Angular signals. The root cause was improper implementation of the Angular ControlValueAccessor pattern in the handleFrameworkEventAngular function, which was calling both propagateChange and writeValue for user-initiated events.

Key changes:

• Removed writeValue call from handleFrameworkEventAngular function to follow proper Angular ControlValueAccessor pattern
• Added documentation explaining the distinction between propagateChange (view → model) and writeValue (model → view)
• Added test showcase demonstrating the fix with Angular signals

Reviewed Changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.

File	Description
packages/components/src/utils/form-components.ts	Core fix removing writeValue call and adding documentation for proper ControlValueAccessor pattern
showcases/angular-showcase/src/app/components/form/form.component.ts	Test component setup with signal state and change handler
showcases/angular-showcase/src/app/components/form/form.component.html	Test template demonstrating switch with Angular signals