From 85e69a55859a66c6585cbf447939e3c6b5a714a4 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 18 Dec 2023 12:36:41 -0500
Subject: [PATCH] Fix #5610: Radio/Checkbox always fire onClick (#5614)

---
 components/lib/checkbox/Checkbox.js       | 53 +++++++++++-----------
 components/lib/radiobutton/RadioButton.js | 54 +++++++++++------------
 2 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index e15b0f122a..dfee79bf72 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { CheckboxBase } from './CheckboxBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Checkbox = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -37,35 +37,34 @@ export const Checkbox = React.memo(
                 const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
                 const isInputToggled = event.target === inputRef.current;
                 const isCheckboxToggled = checkboxClicked && event.target.checked !== checked;
-
-                if (isInputToggled || isCheckboxToggled) {
-                    const value = checked ? props.falseValue : props.trueValue;
-                    const eventData = {
-                        originalEvent: event,
+                const value = checked ? props.falseValue : props.trueValue;
+                const eventData = {
+                    originalEvent: event,
+                    value: props.value,
+                    checked: value,
+                    stopPropagation: () => {
+                        event.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.preventDefault();
+                    },
+                    target: {
+                        type: 'checkbox',
+                        name: props.name,
+                        id: props.id,
                         value: props.value,
-                        checked: value,
-                        stopPropagation: () => {
-                            event.stopPropagation();
-                        },
-                        preventDefault: () => {
-                            event.preventDefault();
-                        },
-                        target: {
-                            type: 'checkbox',
-                            name: props.name,
-                            id: props.id,
-                            value: props.value,
-                            checked: value
-                        }
-                    };
-
-                    props.onClick && props.onClick(eventData);
-
-                    // do not continue if the user defined click wants to prevent
-                    if (event.defaultPrevented) {
-                        return;
+                        checked: value
                     }
+                };
 
+                props.onClick && props.onClick(eventData);
+
+                // do not continue if the user defined click wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+
+                if (isInputToggled || isCheckboxToggled) {
                     props.onChange && props.onChange(eventData);
                 }
 
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index e8290251e1..23479a95b4 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { RadioButtonBase } from './RadioButtonBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const RadioButton = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -39,35 +39,35 @@ export const RadioButton = React.memo(
                 const inputClicked = event.target === inputRef.current;
                 const isInputToggled = inputClicked && event.target.checked !== checked;
                 const isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
-
-                if (isInputToggled || isRadioToggled) {
-                    const value = !checked;
-                    const eventData = {
-                        originalEvent: event,
+                const value = !checked;
+
+                const eventData = {
+                    originalEvent: event,
+                    value: props.value,
+                    checked: value,
+                    stopPropagation: () => {
+                        event.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.preventDefault();
+                    },
+                    target: {
+                        type: 'radio',
+                        name: props.name,
+                        id: props.id,
                         value: props.value,
-                        checked: value,
-                        stopPropagation: () => {
-                            event.stopPropagation();
-                        },
-                        preventDefault: () => {
-                            event.preventDefault();
-                        },
-                        target: {
-                            type: 'radio',
-                            name: props.name,
-                            id: props.id,
-                            value: props.value,
-                            checked: value
-                        }
-                    };
-
-                    props.onClick && props.onClick(eventData);
-
-                    // do not continue if the user defined click wants to prevent
-                    if (event.defaultPrevented) {
-                        return;
+                        checked: value
                     }
+                };
 
+                props.onClick && props.onClick(eventData);
+
+                // do not continue if the user defined click wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+
+                if (isInputToggled || isRadioToggled) {
                     props.onChange && props.onChange(eventData);
 
                     if (isRadioToggled) {