bug: When splicing item from array of data displayed in Virtual Scroll list, end item is duplicated.

Bug Report

Ionic version: [x] 4.1

Current behavior: Splicing an item out of ion-virtual-scroll list results in duplicate end items. If deleting end item, it fails to remove.

I am deleting Department 3:

This is what is left after deleting Department 3:

Expected behavior: Item should be removed.

Steps to reproduce: Bind ion-items to an array of data Set trackBy to detect changes Delete an item from the array. (Example uses a sliding delete option)

Related code:

GitHub Example App

<ion-content>
  <div class="ion-padding">
    <ion-virtual-scroll [trackBy]="trackBy" [items]="departments" approxItemHeight="61px">
      <ion-item-sliding *virtualItem="let d">
        <ion-item>
          <ion-label>{{ d.name }}</ion-label>
        </ion-item>
        <ion-item-options side="start">
            <ion-item-option (click)="deleteDepartment(d, $event)" expandable="true" color="danger">
              Delete
            </ion-item-option>
          </ion-item-options>
      </ion-item-sliding>
    </ion-virtual-scroll>
  </div>
</ion-content>

import { Component } from '@angular/core';

export interface Department {
  id: number;
  name: string;
}
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  departments: Department[] = [
    { id: 1, name: 'Department 1' },
    { id: 2, name: 'Department 2' },
    { id: 3, name: 'Department 3' },
    { id: 4, name: 'Department 4' }];

  /** Track By */
  public trackBy(index: number, value: Department) {
    return value.id;
  }

  private deleteDepartment(dept: Department, evt: Event) {
    evt.stopPropagation();
    evt.preventDefault();

    const idx = this.departments.findIndex(m => m.id === dept.id);
    this.departments.splice(idx, 1);
  }
}

Other information: I am not sure, but it could be related to this issue: 18275

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (C:\Users\cindy\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

[HorseFly]

Yes, this does seem to resolve our issues. Thank you!

[liamdebeasi]

Thanks for the update! I checked the repo and am able to reproduce this issue.

It looks like this is due to how Stencil (what Ionic is built with) handles updating arrays with change detection: https://stenciljs.com/docs/reactive-data#updating-arrays

The following code does not work:

const idx = this.departments.findIndex(m => m.id === dept.id);
this.departments.splice(idx, 1);

the follow code does work:

this.departments = this.departments.filter(m => m.id !== dept.id);

In general, when mutating arrays you will want to create a new array in order for the components to detect changes properly. Does this solve your issue?

Thanks!