Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DavidStrausz opened this issue Sep 5, 2019 · 6 comments

Comments

@DavidStrausz
Copy link
Contributor

commented Sep 5, 2019

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
@ionitron-bot ionitron-bot bot added the triage label Sep 5, 2019
@EricKit

This comment has been minimized.

Copy link

commented Sep 7, 2019

Same issue here when Popover is presented a second time.

@rehannawab

This comment has been minimized.

Copy link

commented Sep 12, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 17, 2019

@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 comment has been minimized.

Copy link

commented Sep 23, 2019

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

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Sep 24, 2019
@ionitron-bot ionitron-bot bot removed the triage label Sep 24, 2019
@ionitron-bot ionitron-bot bot removed triage labels Sep 24, 2019
@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Sep 24, 2019
@liamdebeasi liamdebeasi moved this from On deck ⚾️ to Needs review 🤔 in Ionic Core Sep 25, 2019
Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Sep 25, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 25, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Ionic Core
  
Done 🎉
6 participants
You can’t perform that action at this time.