bug: nested `ion-checkbox` inside `ion-radio-group` does not work

[DavidStrausz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When nesting an ion-checkbox inside an ion-radio-group alongside ion-radio elements the checkbox cannot be checked/unchecked.

Expected Behavior

The checkbox should keep working as usual. In v6 this was working, also e.g. ion-toggle works.

Steps to Reproduce

1. Run reproduction
2. Select "Grapes" in the radio-group
3. Try to check/uncheck the checkbox

Code Reproduction URL

https://github.com/DavidStrausz/modern-input-test

Ionic Info

Ionic:

 Ionic CLI : 7.1.1 (C:\Users\dstrauss\AppData\Roaming\npm\node_modules\@ionic\cli)
 Ionic Framework : @ionic/angular 7.0.6
 @angular-devkit/build-angular : 15.2.8
 @angular-devkit/schematics : 15.2.8
 @angular/cli : 15.2.8
 @ionic/angular-toolkit : 9.0.0

Capacitor:

 Capacitor CLI : 5.0.3
 @capacitor/android : not installed
 @capacitor/core : 5.0.3
 @capacitor/ios : not installed

Utility:

 cordova-res : 0.15.4
 native-run : 1.7.2

System:

 NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe)
 npm : 9.4.1
 OS : Windows 10

Additional Information

I'm using @ionic/angular

[liamdebeasi]

Thanks for the report. Can you clarify why you are using checkboxes inside of a radio group? The documentation states that radios should be used inside of a radio group.

[DavidStrausz]

@liamdebeasi Thanks for your answer! Oh, I am using radios in the radio group, in some cases I just display an additonal checkbox directly below the selected radio option (like in the reprodution example).

Our specific use-case is a a radio group where the user can select how they want to pay (credit-card, paypal, etc.), and for some of these options we offer the possibility to save the payment method, so it can be used without entering the details again, this is done using a checkbox which is available below some of the options when they are selected.

We could just swap the checkboxes for toggles, as these do work as expected, but seems like it should work for all inputs, as it has through ionic versions 1-6.

[liamdebeasi]

It looks like this behavior change is related to a6b2629#diff-480c2b0a087c089851e16f28f69d728afc0bfbddf1b5c19b0b8ee07bd072c24b.

ion-toggle works because the check/uncheck behavior is handled in an click event callback on the host.
ion-checkbox listens for the change event from the underlying input element.

ion-radio-group calls ev.preventDefault() when a click happens which prevents the native input inside of ion-checkbox from being checked/unchecked (which is the default browser behavior). I need to check with the team to see if there's a specific reason why we need to listen for change over click.

[liamdebeasi]

Going to merge this with #27169. As part of the work for the linked ticket we plan to update ion-checkbox to listen for click events instead of the native change event. This should avoid the behavior reported here.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.