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

* Initial plan

* Initial exploration and understanding of the DB Switch double event issue

Co-authored-by: mfranzke <[email protected]>

* Fix double event firing in DB Switch with Angular signals

Co-authored-by: mfranzke <[email protected]>

* Remove unrelated files from PR - keep only the actual DB Switch fix

Co-authored-by: mfranzke <[email protected]>

* docs: provide an example for a signal based switch

* refactor: regenerated package lock file

* refactor: regenerated package lock file

* Changes before error encountered

Co-authored-by: mfranzke <[email protected]>

* Update .gitignore

* refactor: updated package-lock.json file from main

* fix(switch): prevent double change events by skipping props.onChange in Angular target

* chore(switch): remove console.log

* fix(switch): call onchange only if set

* fix(switch): use old path to components

* chore: add changeset

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: mfranzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Michael Kraus <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: 4 people

.changeset/4779-accessibility-improvements.md

@@ -0,0 +1,9 @@
+---
+"@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(DB Switch): double event firing with Angular signals

packages/components/src/components/switch/switch.lite.tsx

@@ -39,14 +39,15 @@ export default function DBSwitch(props: DBSwitchProps) {
 	const state = useStore<DBSwitchState>({
 		_id: undefined,
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
-			if (props.onChange) {
-				props.onChange(event);
-			}
-
 			useTarget({
 				angular: () =>
 					handleFrameworkEventAngular(state, event, 'checked'),
-				vue: () => handleFrameworkEventVue(() => {}, event, 'checked')
+				vue: () => handleFrameworkEventVue(() => {}, event, 'checked'),
+				default: () => {
+					if (props.onChange) {
+						props.onChange(event);
+					}
+				}
 			});
 		},
 		handleBlur: (event: InteractionEvent<HTMLInputElement>) => {

packages/components/src/utils/form-components.ts

@@ -4,9 +4,7 @@ export const handleFrameworkEventAngular = (
 	event: any,
 	modelValue: string = 'value'
 ): void => {
-	// Change event to work with reactive and template driven forms
 	component.propagateChange(event.target[modelValue]);
-	component.writeValue(event.target[modelValue]);
 };
 
 export const handleFrameworkEventVue = (

showcases/angular-showcase/src/app/components/form/form.component.html

@@ -200,6 +200,14 @@
 				</db-button>
 			</fieldset>
 		</form>
+
+		<p>Switch with Angular signals</p>
+		<db-switch
+			[checked]="checkedSignal()"
+			(change)="handleChange($event)"
+			label="My Switch"
+		>
+		</db-switch>
 	</div>
 	<div>
 		<h1>Output</h1>

showcases/angular-showcase/src/app/components/form/form.component.ts

@@ -1,7 +1,8 @@
 import {
 	Component,
 	CUSTOM_ELEMENTS_SCHEMA,
-	NO_ERRORS_SCHEMA
+	NO_ERRORS_SCHEMA,
+	signal
 } from '@angular/core';
 import {
 	FormControl,
@@ -16,6 +17,7 @@ import {
 	DBInput,
 	DBRadio,
 	DBSelect,
+	DBSwitch,
 	DBTabItem,
 	DBTabList,
 	DBTabPanel,
@@ -44,12 +46,16 @@ import { environment } from '../../../environments/environment';
 				DBTabs,
 				DBTabList,
 				DBTabItem,
-				DBTabPanel
+				DBTabPanel,
+				DBSwitch
 			],
 	standalone: true,
 	schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FormComponent {
+	// DB Switch with Angular signals
+	checkedSignal = signal(false);
+
 	array = ['X', 'Y', 'Z'];
 	radio = '';
 	input = '';
@@ -150,4 +156,8 @@ export class FormComponent {
 			})
 		);
 	}
+
+	handleChange(event: any) {
+		this.checkedSignal.set(event.target.checked);
+	}
 }