Merge pull request #3014 from woocommerce/PCP-4013-checkboxes-should-toggle-when-clicking-anywhere-inside-the-box

Toggle the checkboxes when clicking anywhere inside the box
This commit is contained in:
Emili Castells 2025-01-23 11:07:14 +01:00 committed by GitHub
commit a6911bb5ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -12,8 +12,31 @@ const SelectBox = ( props ) => {
boxClassName += ' selected';
}
const handleClick = () => {
if ( props.type === 'checkbox' ) {
let newValue;
if ( Array.isArray( props.currentValue ) ) {
if ( props.currentValue.includes( props.value ) ) {
newValue = props.currentValue.filter(
( optionValue ) => optionValue !== props.value
);
} else {
newValue = [ ...props.currentValue, props.value ];
}
} else {
newValue = ! props.currentValue;
}
props.changeCallback( newValue );
}
};
return (
<div className={ boxClassName }>
<div
className={ boxClassName }
onClick={ props.type === 'checkbox' ? handleClick : undefined }
>
{ props.type === 'radio' && (
<PayPalRdb
{ ...{
@ -22,11 +45,7 @@ const SelectBox = ( props ) => {
} }
/>
) }
{ props.type === 'checkbox' && (
<PayPalCheckbox
{ ...props }
/>
) }
{ props.type === 'checkbox' && <PayPalCheckbox { ...props } /> }
<div className="ppcp-r-select-box__content">
<div className="ppcp-r-select-box__content-inner">
<span className="ppcp-r-select-box__title">