fix: issues with switch and checked state (#3831)

* fix: issues with switch and checked state * fix: issue for react * chore: update snapshot * fix: issue with aria checked for switch * fix: issue with typescript
db-ux-design-system · Feb 19, 2025 · 96816d1 · 96816d1
1 parent 125c4c2
commit 96816d1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png
diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts
@@ -77,10 +77,10 @@ const setControlValueAccessorReplacements = (
 		from: 'ngOnInit()',
 		to: `
 		writeValue(value: any) {
-		  this.${valueAccessor} = value;
+		  this.${valueAccessor} = ${valueAccessor === 'checked' ? '!!' : ''}value;
 
 		  if (this._ref?.nativeElement) {
-			 this.renderer.setProperty(this._ref?.nativeElement, '${valueAccessor}', value);
+			 this.renderer.setProperty(this._ref?.nativeElement, '${valueAccessor}', ${valueAccessor === 'checked' ? '!!' : ''}value);
 		  }
 		}
 

diff --git a/packages/components/src/components/switch/model.ts b/packages/components/src/components/switch/model.ts
@@ -11,7 +11,6 @@ import {
 	GlobalState,
 	IconAfterProps,
 	IconProps,
-	InitializedState,
 	SizeProps
 } from '../../shared/model';
 
@@ -41,5 +40,4 @@ export type DBSwitchState = DBSwitchDefaultState &
 	GlobalState &
 	ChangeEventState<HTMLInputElement> &
 	FocusEventState<HTMLInputElement> &
-	FormState &
-	InitializedState;
+	FormState;
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
@@ -1,5 +1,6 @@
 import {
 	onMount,
+	onUpdate,
 	Show,
 	useDefaultProps,
 	useMetadata,
@@ -28,8 +29,10 @@ export default function DBSwitch(props: DBSwitchProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBSwitchState>({
 		_id: undefined,
-		_checked: false,
-		initialized: false,
+		_checked: useTarget({
+			react: props['defaultChecked'] ?? false,
+			default: false
+		}),
 		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -71,6 +74,13 @@ export default function DBSwitch(props: DBSwitchProps) {
 	onMount(() => {
 		state._id = props.id ?? `switch-${uuid()}`;
 	});
+
+	onUpdate(() => {
+		if (props.checked !== undefined && props.checked !== null) {
+			state._checked = !!props.checked;
+		}
+	}, [props.checked]);
+
 	// jscpd:ignore-end
 
 	return (
@@ -85,9 +95,10 @@ export default function DBSwitch(props: DBSwitchProps) {
 				id={state._id}
 				type="checkbox"
 				role="switch"
-				aria-checked={state._checked}
+				aria-checked={getBooleanAsString(state._checked)}
 				ref={_ref}
 				checked={props.checked}
+				value={props.value}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}
 				aria-invalid={props.validation === 'invalid'}