Skip to content

Commit 4ce50d3

Browse files
authored
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
1 parent 39a1afc commit 4ce50d3

File tree

2 files changed

+40
-34
lines changed

2 files changed

+40
-34
lines changed

packages/components/src/components/checkbox/checkbox.lite.tsx

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,6 @@ import {
99
useTarget
1010
} from '@builder.io/mitosis';
1111
import { DBCheckboxProps, DBCheckboxState } from './model';
12-
import {
13-
cls,
14-
delay,
15-
getHideProp,
16-
hasVoiceOver,
17-
stringPropVisible,
18-
uuid
19-
} from '../../utils';
2012
import {
2113
DEFAULT_INVALID_MESSAGE,
2214
DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -30,6 +22,14 @@ import {
3022
handleFrameworkEventVue
3123
} from '../../utils/form-components';
3224
import DBInfotext from '../infotext/infotext.lite';
25+
import {
26+
cls,
27+
delay,
28+
getHideProp,
29+
hasVoiceOver,
30+
stringPropVisible,
31+
uuid
32+
} from '../../utils';
3333

3434
useMetadata({
3535
angular: {
@@ -135,26 +135,39 @@ export default function DBCheckbox(props: DBCheckboxProps) {
135135
}, [state._id]);
136136

137137
onUpdate(() => {
138-
if (state.initialized && document && state._id) {
139-
const checkboxElement = document?.getElementById(
140-
state._id
141-
) as HTMLInputElement;
142-
if (checkboxElement) {
143-
// in angular this must be set via native element
144-
if (props.checked != undefined) {
145-
checkboxElement.checked = props.checked;
146-
}
147-
148-
if (props.indeterminate !== undefined) {
149-
// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
150-
// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
151-
checkboxElement.indeterminate = props.indeterminate;
138+
if (_ref) {
139+
useTarget({
140+
angular: () => {
141+
if (
142+
state.initialized &&
143+
props.indeterminate !== undefined
144+
) {
145+
// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
146+
// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
147+
_ref.indeterminate = props.indeterminate;
148+
}
149+
},
150+
default: () => {
151+
if (props.indeterminate !== undefined) {
152+
// When indeterminate is set, the value of the checked prop only impacts the form submitted values.
153+
// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
154+
_ref.indeterminate = props.indeterminate;
155+
}
152156
}
157+
});
158+
}
159+
}, [state.initialized, _ref, props.indeterminate]);
153160

154-
state.initialized = false;
161+
onUpdate(() => {
162+
if (state.initialized && _ref) {
163+
// in angular this must be set via native element
164+
if (props.checked != undefined) {
165+
_ref.checked = props.checked;
155166
}
167+
168+
state.initialized = false;
156169
}
157-
}, [state.initialized, props.indeterminate, props.checked]);
170+
}, [state.initialized, _ref, props.checked]);
158171
// jscpd:ignore-end
159172

160173
return (

packages/components/src/components/radio/radio.lite.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,10 @@ export default function DBRadio(props: DBRadioProps) {
7171
// jscpd:ignore-end
7272

7373
onUpdate(() => {
74-
if (props.checked && state.initialized && document && state._id) {
75-
const radioElement = document?.getElementById(
76-
state._id
77-
) as HTMLInputElement;
78-
if (radioElement) {
79-
if (props.checked != undefined) {
80-
radioElement.checked = true;
81-
}
82-
}
74+
if (props.checked && state.initialized && _ref) {
75+
_ref.checked = true;
8376
}
84-
}, [state.initialized, props.checked]);
77+
}, [state.initialized, _ref, props.checked]);
8578

8679
return (
8780
<label

0 commit comments

Comments
 (0)