bug: v7 ion-list + ion-radio with new label behavior has a smaller interactive zone than in v6

[Julien-Marcou]

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.0.1

Current Behavior

Inside an <ion-list> When using the new label slot of the <ion-radio> instead of an <ion-label> + an <ion-radio>, the interactive (clickable) zone of the <ion-radio> is smaller than with Ionic v6.

When you hover & click an item of the list, you still get the "hover" + "ripple" effects, but the radio button does not get selected unless you click the correct part of it.

In v6:

<ion-list>
  <ion-radio-group>
    <ion-item>
      <ion-label>Label 1</ion-label>
      <ion-radio value="1"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Label 2</ion-label>
      <ion-radio value="2"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

In v7:

<ion-list>
  <ion-radio-group>
    <ion-item>
      <ion-radio value="1">Label 1</ion-radio>
    </ion-item>
    <ion-item>
      <ion-radio value="2">Label 2</ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Expected Behavior

You should be able to click anywhere in the <ion-item> and it should select the radio button (like it did in Ionic v6).

(Or the <ion-radio> should take the entire size of the <ion-item>).

Steps to Reproduce

1. Create a <ion-list> with <ion-item> & <ion-radio> inside of it
2. Hover an <ion-item> until you get the "hover" effect, but not the "pointer" cursor
3. Click the <ion-item>
4. The ripple effect is triggered, but the <ion-radio> does not get selected

---

Here is what I get In Ionic v7:

Record.2023-04-10.215456.mp4

---

Here is what I had in Ionic v6:

Record.2023-04-10.215728.mp4

---

(The videos are a bit laggy, so it's not that easy to undestand by just watching them 😅)

Code Reproduction URL

https://github.com/Julien-Marcou/ionic-issue-27085

You can also this the problem live in the Ionic Documentation for <ion-radio>:
https://ionicframework.com/docs/api/radio#justification

(It's easier to see when selecting the MD mode instead of the default iOS as you get ripple effects when you click an <ion-item> so that you clearly see that you have clicked the <ion-item> but the <ion-radio> does not get selected)

Ionic Info

Ionic:

   Ionic CLI                     : 7.0.1 (/home/jmarcou/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.0.1
   @angular-devkit/build-angular : 15.2.5
   @angular-devkit/schematics    : 15.2.5
   @angular/cli                  : 15.2.5
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

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

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.15.0 (/home/jmarcou/.nvm/versions/node/v18.15.0/bin/node)
   npm    : 9.6.4
   OS     : Linux 5.15

Additional Information

No response

[liamdebeasi]

Thanks for the report. Here is a dev build with a proposed fix if you are interested in testing: 7.0.2-dev.11681223603.14da7831

[Julien-Marcou]

Thanks, I can confirm it fixes the problem vertically, but their is still a bit of space on the sides that is not "clickable" 😅

This is less critical, but if the fix is easy, it would be appreciable 😌

[liamdebeasi]

Yes, that is a separate bug which I have reported here: #27169. This bug (at least when clicking the spacing to the left) reproduces in Ionic 6 as well.

[Julien-Marcou]

Nice, thank you

[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.