virtualScroll with radio-group

Ionic Framework ionic-v3
1

I use a virtualScroll with radio-group. The ngModel binding works, but if I’ ve a “selectedItem” at the beginning of the list, if I scroll I see also another radio selected.
Morover if I bind a “selectedItem” that it is at the end of the list, the radio is not selected. (If I scroll at the end of the list my item is not selected).

How I can solve? I have to use virtualScroll because I see an higth improvement on the performances.

My code:

<ion-list  [virtualScroll]="items" radio-group [(ngModel)]="selectedItem" [approxItemHeight]=" '45px' ">
    <ion-item *virtualItem="let item" >
      <ion-label>{{item.name}}</ion-label>
      <ion-radio  color="secondary"  [value]="item" item-left></ion-radio>
    </ion-item>
  </ion-list>
2

Could you create a plunker demo of this? I suspect that it is because virtualScroll reuses the items as you scroll through the list. You might want to try to add virtualTrackBy to see if that solves the problem.

3

I’ve already used virtualTrackBy. I don’t know if it is correct.

In this plunker http://plnkr.co/edit/hVLSKQF76ELJSaLq1PbT?p=preview
you can see:

  1. if you select the first item (my0), all it is ok.

  2. If you select the 2nd “my1” item, and then if you scroll down, you can see that also “my60” is selected, and then if you scroll up, the selection on my1 disappears, or another item is selected.

  3. If you select “my2” item and then you scroll, “my61” also is selceted… etc…

All custom code is in:

pages/home/home.html
pages/home/home.ts

Do you have any suggestions?

4

Definitely seems to be an interaction where virtualScroll is reusing items and therefore reproducing checked items. If you move the virtualScroll out of the ion-list where radio-group is used it seems to work as you can see in this plunker: http://plnkr.co/edit/wMonK89LKecf1LORkhfx?p=preview

You might want to open a github issue for this. Seems like an unintended interaction between radio-group and virtualScroll. The other problem you might run into is if you need to use ngModel to track the selected I was running into display issues as you can see in this plunker: http://plnkr.co/edit/i20QdRjidsFGSpuoqcVY?p=preview