Igniteui-angular: Radios in Radio Groups do not change state properly

[jackofdiamond5]

• igniteui-angular version: 10.2.x, 11.0.x, 11.1.x
• browser: all

Steps to reproduce

1. Open the following sample - link
2. Click on the Option 2 radio button
3. Observe

Result

The Option 1 radio button is not deselected.

Expected result

The Option 1 radio button is deselected.

[baleeds]

@jackofdiamond5 Was this a general problem that you would expect to affect all usages of radio buttons? We are running 10.2.0-alpha.4 and seem to be experiencing this problem.

[kdinev]

@baleeds AFAIK this issue was only reproducible in an OnPush scenario. Anyways, my suggestion would be to upgrade from the alpha build you're using to an official release build. There's no breaking changes from alpha.4 to the latest 10.2 and ng update would take care of applying the necessary migrations for the official 10.2.0.

[baleeds]

@kdinev Thanks for the tip. I will migrate us off of the alpha build.

It's possible that my radio button issue was related to this same scenario.

My code was basically this, where the options list is an observable.

<igx-radio-group name="fruitsRadioGroup" formControlName="favoriteFruit">
    <igx-radio class="radio-sample" *ngFor="let fruit of fruits$ | async" value="{{fruit}}">
        {{fruit}}
    </igx-radio>
</igx-radio-group>

The issue persisted if I has an initial set of instance property options and then set them again when the async options came in.

I fixed it by not mounting the radio group until the async options were loaded. So I think it has to do with changing the option references asynchronously.

Perhaps it's fixed by this PR.

[kdinev]

@baleeds My suggestion is to try it with the latest official version, and if your scenario doesn't work, then we would reopen this issue!