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.