bug: ion-radio-group infinity loop on ionChange

[wilianwrech]

Bug Report

Ionic version: 4.9.0

Current behavior: Looping forever triggering ionChange and freezing app

Expected behavior: Do not loop forever and not freeze app

Steps to reproduce: Create one page with the code bellow, check one radio, toggle the radio using the button and toggle again.

Related code: .html

<ion-radio-group *ngIf="obj.radioVisible == 1" [(ngModel)]="obj.valueA" [ngModelOptions]="{standalone: true}" (ionChange)="consoleLog()">
  <ion-item>
    <ion-label>A</ion-label>
    <ion-radio slot="end" color="success" value="1"></ion-radio>
  </ion-item>
</ion-radio-group>
<ion-radio-group *ngIf="obj.radioVisible == 2" [(ngModel)]="obj.valueB" [ngModelOptions]="{standalone: true}" (ionChange)="consoleLog()">
  <ion-item>
    <ion-label>B</ion-label>
    <ion-radio slot="end" color="success" value="2"></ion-radio>
  </ion-item>
</ion-radio-group>
<button (click)="obj.radioVisible = obj.radioVisible == 1 ? 2 : 1"> Toggle radio</button>

.ts

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage {
  obj = {};
  constructor() { }
  consoleLog() {
    console.log('trigger');
  }
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.14
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 19 other plugins)

Utility:

   cordova-res (update available: 0.8.1) : 0.6.0
   native-run (update available: 0.3.0)  : 0.2.8

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v12.14.1
   npm               : 6.13.1
   OS                : Windows 10

[Mageek627]

Maybe try with [hidden]='obj.radioVisible != 1' instead of *ngIf='obj.radioVisible == 1'

I have had issues with *ngIf because it modifies the DOM.

[wilianwrech]

Maybe try with [hidden]='obj.radioVisible != 1' instead of *ngIf='obj.radioVisible == 1'

I have had issues with *ngIf because it modifies the DOM.

I already did a workaround before opening the issue, I could not use hidden because I was having some problems with ngModel, I just switched to checkboxes, restyled using css and assigned changes to do the radio behavior. I opened the issue to report the bug, unfortunately, no one did the triage.

Thanks for replying 😄

[liamdebeasi]

Thanks for the issue. Is this an issue with the latest version of Ionic Framework? If so, can you provide a repo with the code required to reproduce the issue?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!