Fix primefaces#5610: Radio/Checkbox always fire onClick

melloware · Jan 9, 2024 · 5c5ebb1 · 5c5ebb1
1 parent 8f174ee
commit 5c5ebb1
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 55 deletions.
diff --git 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
@@ -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) => {
@@ -38,36 +38,36 @@ export const RadioButton = React.memo(
                 const radioClicked = event.target instanceof HTMLDivElement;
                 const inputClicked = event.target === inputRef.current;
                 const isInputToggled = inputClicked && event.target.checked !== checked;
-                const isRadioToggled = radioClicked && (DomHandler.isAttributeEquals(elementRef.current, 'data-p-checked', true) === checked ? !checked : false);
-
-                if (isInputToggled || isRadioToggled) {
-                    const value = !checked;
-                    const eventData = {
-                        originalEvent: event,
+                const isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
+                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) {