Fixes #3220 (#3226)

* Remove second source of truth for Checkbox and RadioButton, such that they respect external checked prop. * Removed dead import Co-authored-by: Harry Bradshaw <harry.bradshaw@softwire.com> Co-authored-by: Melloware <mellowaredev@gmail.com>
primefaces · Sep 1, 2022 · b573c86 · b573c86
1 parent 8a95e86
commit b573c86
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -12,8 +12,10 @@ export const Checkbox = React.memo(
         const onClick = (event) => {
             if (!props.disabled && !props.readOnly && props.onChange) {
                 const checked = isChecked();
-
-                if (inputRef.current.checked === checked) {
+                const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement;
+                const isInputToggled = event.target === inputRef.current;
+                const isCheckboxToggled = checkboxClicked && event.target.checked !== checked;
+                if (isInputToggled || isCheckboxToggled) {
                     const value = checked ? props.falseValue : props.trueValue;
                     props.onChange({
                         originalEvent: event,
@@ -29,7 +31,6 @@ export const Checkbox = React.memo(
                             checked: value
                         }
                     });
-                    inputRef.current.checked = !checked;
                 }
 
                 DomHandler.focus(inputRef.current);

diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
@@ -9,14 +9,17 @@ export const RadioButton = React.memo(
         const inputRef = React.useRef(props.inputRef);
 
         const select = (e) => {
-            inputRef.current.checked = true;
             onClick(e);
         };
 
         const onClick = (e) => {
             if (!props.disabled && props.onChange) {
                 const checked = props.checked;
-                if (inputRef.current.checked === checked) {
+                const radioClicked = e.target instanceof HTMLDivElement;
+                const inputClicked = e.target === inputRef.current;
+                const isInputToggled = inputClicked && e.target.checked !== checked;
+                const isRadioToggled = radioClicked && !e.target.checked;
+                if (isInputToggled || isRadioToggled) {
                     const value = !checked;
                     props.onChange({
                         originalEvent: e,
@@ -32,7 +35,6 @@ export const RadioButton = React.memo(
                             checked: value
                         }
                     });
-                    inputRef.current.checked = value;
                 }
 
                 DomHandler.focus(inputRef.current);