fix: issue with checkbox and radio not reacting in every framework (#…

…3848) * fix: issue with checkbox and radio not reacting in every framework * fix: issue with angular checkbox
db-ux-design-system · Feb 21, 2025 · 4ce50d3 · 4ce50d3
1 parent 39a1afc
commit 4ce50d3
Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -9,14 +9,6 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
-import {
-	cls,
-	delay,
-	getHideProp,
-	hasVoiceOver,
-	stringPropVisible,
-	uuid
-} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -30,6 +22,14 @@ import {
 	handleFrameworkEventVue
 } from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
+import {
+	cls,
+	delay,
+	getHideProp,
+	hasVoiceOver,
+	stringPropVisible,
+	uuid
+} from '../../utils';
 
 useMetadata({
 	angular: {
@@ -135,26 +135,39 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 	}, [state._id]);
 
 	onUpdate(() => {
-		if (state.initialized && document && state._id) {
-			const checkboxElement = document?.getElementById(
-				state._id
-			) as HTMLInputElement;
-			if (checkboxElement) {
-				// in angular this must be set via native element
-				if (props.checked != undefined) {
-					checkboxElement.checked = props.checked;
-				}
-
-				if (props.indeterminate !== undefined) {
-					// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
-					// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
-					checkboxElement.indeterminate = props.indeterminate;
+		if (_ref) {
+			useTarget({
+				angular: () => {
+					if (
+						state.initialized &&
+						props.indeterminate !== undefined
+					) {
+						// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+						// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+						_ref.indeterminate = props.indeterminate;
+					}
+				},
+				default: () => {
+					if (props.indeterminate !== undefined) {
+						// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+						// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+						_ref.indeterminate = props.indeterminate;
+					}
 				}
+			});
+		}
+	}, [state.initialized, _ref, props.indeterminate]);
 
-				state.initialized = false;
+	onUpdate(() => {
+		if (state.initialized && _ref) {
+			// in angular this must be set via native element
+			if (props.checked != undefined) {
+				_ref.checked = props.checked;
 			}
+
+			state.initialized = false;
 		}
-	}, [state.initialized, props.indeterminate, props.checked]);
+	}, [state.initialized, _ref, props.checked]);
 	// jscpd:ignore-end
 
 	return (

diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
@@ -71,17 +71,10 @@ export default function DBRadio(props: DBRadioProps) {
 	// jscpd:ignore-end
 
 	onUpdate(() => {
-		if (props.checked && state.initialized && document && state._id) {
-			const radioElement = document?.getElementById(
-				state._id
-			) as HTMLInputElement;
-			if (radioElement) {
-				if (props.checked != undefined) {
-					radioElement.checked = true;
-				}
-			}
+		if (props.checked && state.initialized && _ref) {
+			_ref.checked = true;
 		}
-	}, [state.initialized, props.checked]);
+	}, [state.initialized, _ref, props.checked]);
 
 	return (
 		<label