feat: Add ion-radio-group compareWith property

[WimWidgets]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
Support for using objects as values for ion-radio elements within an ion-radio-group and having the default value checked.

Describe Preferred Solution
Add a compareWith property to ion-radio-group just like on ion-select.

Additional Context
Is there a reason the select does support this and the radio group doesn't? It seems to me both are merely different UI solutions for a similar technical use-case (select one of a list of values).

[xyboox]

I second this, for Ionic v5

[topalavlad]

I also find this useful. I would like to try and implement it if the issue passes triage.

[capc0]

same requirement here. Binding value to objects does not work very well without a compareWith function

[averyjohnston]

Hi folks, thanks for the feature request. Could you explain your use case for this? I know it's been a while since this was posted, so anyone feel free to chime in.

[capc0]

The current implementation is based around strict equality (https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/radio/radio.tsx#L128)

This works fine for literals, but is problematic when dealing with object references. Often enough the list of selectable radio button values is fetched from an API (lets say an array of cities [{name: 'London', country: 'UK' }, ....] and you already have the selected city {name: 'London', id: '123'} from somewhere else. Since it is not the same object reference, no radio button seems to be checked. With compareWith we can implement a function and tell that e.g. only the name property should be used for comparison which would render the radio button as selected.

[averyjohnston]

Thanks! I talked with the team, and we agree that this would be a useful feature to have. I'm also flagging this as help wanted as this would be a good candidate for community help. If you'd like to take a stab at it, you can use ion-select's version of the feature as a starting point.

One thing to note -- there is an open PR here #24687 that addresses a bug in ion-select related to compareWith. Something to be aware of if you dive in before that's reviewed and/or merged.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[jhpetersen]

I just stumbled upon this during my Ionic 3 -> Ionic 6 migration nightmare.
Can't believe that this is not priorized higher.
In Ionic 3 this was easy possible with a custom pipe on the checked property, but now in Ionic 6 one has to code extra stuff to workaround this 👎

[mapsandapps]

Thanks for the feature request! This has been implemented in #27452 and will be released in an upcoming version of Ionic.

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