Ionic-framework: bug: component reuse breaks ion-radio-group/ion-radio (stuck in infinite loop)

[DavidStrausz]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Since @ionic/angular 4.9.0 ion-radio-group/ion-radio end up in an infinite loop when reused (e.g. navigating to the same page a second time).

Expected behavior:
Not to be stuck in an infinite loop.

Steps to reproduce:

1. Clone example repo
2. npm i
3. ionic serve
4. open dev-tools
5. on tab1 click on "push page with radio-group"
6. navigate back to tab1
7. click on "push page with radio-group" again
8. check console -> infinite loop

Related code:
https://github.com/DavidStrausz/radio-reusage-bug

Other information:
Probably cause by #18963

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.7 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

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

System:

   NodeJS : v12.4.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[EricKit]

Same issue here when Popover is presented a second time.

[rehannawab]

This issue is reproduced if the value of multiple ion-radio is bound to variables as below

<ion-list>
    <ion-radio-group [(ngModel)]="cc">
        <ion-list-header>
            <ion-label>Select</ion-label>
        </ion-list-header>

        <ion-item>
            <ion-label>Label 1</ion-label>
            <ion-radio slot="end" [value]="var1"></ion-radio>
        </ion-item>

        <ion-item>
            <ion-label>Label 2</ion-label>
            <ion-radio slot="end" [value]="var2"></ion-radio>
        </ion-item>
    </ion-radio-group>
</ion-list>

However, below works fine

<ion-list>
    <ion-radio-group [(ngModel)]="cc">
        <ion-list-header>
            <ion-label>Select</ion-label>
        </ion-list-header>

        <ion-item>
            <ion-label>Label 1</ion-label>
            <ion-radio slot="end" value="value1"></ion-radio>
        </ion-item>

        <ion-item>
            <ion-label>Label 2</ion-label>
            <ion-radio slot="end" value="value2"></ion-radio>
        </ion-item>
    </ion-radio-group>
</ion-list>

[DavidStrausz]

@rehannawab Yeah, I can confirm that constant values work fine, however whenever you bind the value to a variable either like this [value]="var1" or like that value="{{ var1 }}" the ion-radio gets stuck in the infinite loop when it gets rehydrated.

[DavidStrausz]

@manucorporat I'm sorry to ping you like that, but as there is already a bug fix release out for 4.9.0 I'm wondering if you guys are aware of this issue and if it is going to be fixed before the next major version.

Cheers

[JeramieHallyburton]

This is a pretty big issue. Multiple pages in my app have been completely frozen and killed by Chrome.

[liamdebeasi]

This issue has been fixed and will be available in the next release of Ionic. Thanks!

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