ionic-team/ionic-v3

Re-Opening Issue 12126

ionitron-bot opened this issue · 0 comments

Original issue by @bbehling on 2020-09-29T21:21:23Z

Reopening this issue due to the bug still existing -
ionic-team/ionic-framework#12126

NOTE: Click event will not work because it does not return the value after the check box was cilcked.

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[] 2.x
[X ] 3.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When using [VirtualScroll] and virtualtrackby on an ion-list with many ion-items with checkboxes, if some checkboxes are checked and then you scroll to the bottom of the list(about 1000 items), and scroll back up, it seems as if all the items are still checked, but their state is actually unchecked, because an ionChange event does not set it back to checked.
Expected behavior:

It seems with virtual scroll it destorys and unchecks the items, but remembers what items were checked. On the destroy it sends an ionChange event that the items are not not checked, or false. It should not send the ionChange event and "uncheck" the item. This causes issues when the list is longer than about 100 items, and any checked items from earlier in the list are essentially "gone".
Steps to reproduce:

insert any relevant code here
HTML Code:

<ion-list [virtualScroll]="companyCheckObject"  virtualTrackBy>
<ion-item *virtualItem="let company">
<ion-label> {{company.Company}}</ion-label>
    <ion-checkbox [(ngModel)]="company.isChecked" (ionChange)="checkBoxChecked(company.isChecked,company.Company,company.ID)" checked="company.isChecked">          

.ts code

checkBoxChecked(state,companyName,companyId)
{

if(state == true)
{
   this.companiesToSend.push({"id" : companyId, "name" : companyName, "isChecked" : true});
}     
if(state == false)
{
    var index = this.companiesToSend.indexOf(companyId);
    this.companiesToSend.splice(index,1);
     // console.log(this.companiesToSend);
}
//console.log(this.companiesToSend);

}

Other information:

When using *ngFor instead, it behaves as expected, because the items are not destroyed on scrolling.
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):