ion-radio no longer selectable from clicking anywhere inside an ion-item

[mikelhamer]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

with the new v7 syntax, clicking anywhere within the ion-item that an ion-radio is in no longer selects the ion-radio. This is confusing because the ion-item the radio is in still gets its press animation like its being selected, but the radio itself isn't selected as expected.

This caused my e2e tests to fail even though all I did was change to the new syntax. Now I'm trying to figure out a hack to make it work like it used to using the new syntax

Expected Behavior

clicking anywhere in the ion-item should select the ion-radio. This is how it works with the legacy syntax.

Steps to Reproduce

<!-- Before, observe clicking anywhere in the ion-item will select the radio -->
<ion-list>
  <ion-item>
    <ion-label>Radio Label</ion-label>
    <ion-radio></ion-radio>
  </ion-item>
</ion-list>

<!-- After, observe that clicking anywhere in the ion-item does not select the radio -->
<ion-list>
  <ion-item>
    <ion-radio>Radio Label</ion-radio>
  </ion-item>
</ion-list>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.0.10 @angular-devkit/build-angular : 17.1.1 @angular-devkit/schematics : 17.1.1 @angular/cli : 17.1.1 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.9.0 @capacitor/android : not installed @capacitor/core : 4.4.0 @capacitor/ios : not installed

Utility:

cordova-res (update available: 0.15.4) : 0.15.3 native-run (update available: 2.0.1) : 1.7.3

System:

NodeJS : v18.18.0 (/usr/local/bin/node) npm : 9.7.1 OS : macOS Monterey

Additional Information

No response

[sean-perkins]

@mikelhamer a reproduction is required to validate your bug report.

For example: https://stackblitz.com/edit/xsd8pw?file=index.html

https://github.com/ionic-team/ionic-framework/assets/13732623/7a97b4f7-3d49-4a79-9fb4-8920a6c59b4e

With the provided information, I am unable to reproduce your issue with v7 and the modern control syntax.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[amandaejohnston]

This issue is being closed due to insufficient reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!