Ionic-framework: VirtualScroll broken with pipe filter

[daveshirman]

Ionic version: (check one with "x")

[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
If you include a pipe to filter the virtual scroll items, the app is borked and doesn't render anything. In my complex app, it just locks up completely in fact.

Expected behavior:
Pipes should work with VirtualScroll just like anything else.

Steps to reproduce:
http://plnkr.co/edit/l3QXXXYujSCrJRgCmDzv

1. Note it works fine first (search box+pipe disabled).
2. Swap out the commented and uncommented ion-list lines.

  <ion-list [virtualScroll]="myList">
  <!--<ion-list [virtualScroll]="myList | itemFilter:query">-->

1. See that it is now broken (error item not defined in console).
   Note: this makes no sense as the items are defined at the home.page.ts

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Davids-MacBook-Air:apphazard-app daveshirman$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.2 ios 4.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.8 
    npm        : 3.10.10 

[jgw96]

Hello, thanks for using Ionic! I am going to close this issue as a duplicate of https://github.com/ionic-team/ionic/issues/7103

[daveshirman]

@jgw96 This isn't a duplicate though. The other issue is about ordering. This is a total lack of working of the VirtualScroll.

Please could you discuss these things before just closing.

[jgw96]

Hello @daveshirman , sorry about the misunderstanding here. So this issue is most likely caused by the same underlying issues as the issue i linked too, but the symptoms are different.

[daveshirman]

Hi @jgw96 I read your reply to another user regarding priority of VirtualScroll issues. Problem is, things like this are serious deal breakers in production apps. So we really need some sort of advice on when these VirtualScroll issues are going to be fully addressed.

It's an integral part of most apps to have a long list (not using infinite scroll) and this should really be working properly as Ionic 3 is supposed to be production ready.

Please advise. Thanks.

[daveshirman]

@jgw96 @adamdbradley Can we please get an update? It's been a month with absolutely no acknowledgement of this issue and a timeframe for sorting it. This is really not fair on devs who are needed to support your platform and its growth. Come on guys!

[MarcWadai]

Any update on this issue ? I am having the same problem

[daveshirman]

@jgw96 @adamdbradley Can we please get an update? It's now been TWO months with absolutely no acknowledgement of this issue and a timeframe for sorting it. This is really not fair on devs who are needed to support your platform and its growth. Come on guys!

[TimeTravelersHackedMe]

Any update on this? I'm experiencing an issue where the view does not update when the pipe changes.

[TimeTravelersHackedMe]

It looks like this is where the problem is occuring on lines 427-440 in https://github.com/ionic-team/ionic/blob/master/src/components/virtual-scroll/virtual-scroll.ts

  ngOnChanges(changes: SimpleChanges): void {
    if ('virtualScroll' in changes) {
      // React on virtualScroll changes only once all inputs have been initialized
      const value = changes['virtualScroll'].currentValue;
      if (!isPresent(this._differ) && isPresent(value)) {
        try {
          this._differ = this._iterableDiffers.find(value).create(this.virtualTrackBy);
        } catch (e) {
          throw new Error(
            `Cannot find a differ supporting object '${value}'. VirtualScroll only supports binding to Iterables such as Arrays.`);
        }
      }
    }
  }

[TimeTravelersHackedMe]

Here's a Plunkr that demonstrates the issue:

In this Plnkr, you should be able to click anywhere on the list and have the list sorted from A-Z instead of Z-A but the list does not refresh when the pipe variable changes:
http://plnkr.co/edit/CSz70r?p=preview

[TimeTravelersHackedMe]

This is fixed for me with the latest ionic-angular build. The only problem is the ion-img doesn't work. The above Plnkr is now working since I updated all the angular packages to 4.4.4 and ionic-angular to 3.8.0. You can run "ionic doctor check" to be walked through the process of upgrading.

I updated the Plnkr to show off the ion-img not working.

[konri]

HI, I have still problem. I've updated ionic:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-plugin-proxy : 1.4.11
    @ionic/cli-utils        : 1.17.0
    ionic (Ionic CLI)       : 3.17.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.3.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.8.0

In my Component I have the

<ion-list [virtualScroll]="assets | filterAsset:search" [approxItemHeight]="70" [virtualTrackBy]="trackByEquipId">

  <ion-item *virtualItem="let asset" (click)="toggleVisibility.emit(asset)">
      <ion-label class="asset-label">
....
</ion-item>

the filter Pipe:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filterAsset"
})
export class AssetFilterPipe implements PipeTransform {

  transform(items: Array<any>, condition: string): Array<any> {
    const filtered = items.filter(asset => {
      return asset.name.toLowerCase().indexOf(condition.toLowerCase()) > -1;

    });

    console.log(condition, filtered);

    return filtered;
  }
}

Use case:

1. At the beginning the list is showing ok.
2. I put some to the search input and only one item is render.
3. When I delete the search condition from input, still is visible only one element( that element is changed for the correct one, it's the first of the whole list)
   I've put some console.log, and in the virtualTrackBy I see that virtual scroll is iterate for all elements... But not render. In the html also see only the one _ion-item_

Please help =) is very frustrating.
Thanks
Konrad

[daveshirman]

4 months and this is still broken, actually f*n ridiculous! There are so many issues with VS that it's not worth using until it's fixed IMHO.

My workaround for the time-being is to do the filter in code and additionally do this:

1. Give your VS an Id
   <ion-list #virtualScroll ...

2. Import it in your class:
   import { VirtualScroll } from 'ionic-angular';
import { ViewChild } from '@angular/core';
@ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;

3. Resize with a timeout when you make changes to the list items:

setTimeout(() => { this.virtualScroll.resize(); resolve(); }, 1000);

[konri]

Hi @daveshirman thank for your answer, you have right that is ridiculous... that the ionic team couldn't handle it properly.
I've tried your solution and unfortunately is not working. I did the same like your answer, only think I don't put _resolve()_, because we are not in the promise or maybe this is some crucial point to work? Now instead of one item I have three... but it still is not a full list :D
Maybe you have some another solution to take care of long list in ionic ? I have about >200 records and with *ngFor the performance on the oldest iPhone (5s) is not good enough.
Take care,
thanks

[daveshirman]

Hmm, without seeing your code and being able to run it, I'm not sure what
else to suggest. Maybe if you could post a plunkr I could take a look with
you.
At least something is different now though!

On Wed, Nov 8, 2017 at 7:58 PM, konrad [e-mail] wrote:

Hi @daveshirman https://github.com/daveshirman thank for your answer,
you have right that is ridiculous... that the ionic team couldn't handle it
properly.
I've tried your solution and unfortunately is not working. I did the same
like your answer, only think I don't put resolve(), because we are not
in the promise or maybe this is some crucial point to work? Now instead of
one item I have three... but it still is not a full list :D
Maybe you have some another solution to take care of long list in ionic ?
I have about >200 records and with *ngFor the performance on the oldest
iPhone (5s) is not good enough.
Take care,
thanks

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/12307#issuecomment-342940465,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANnlXhZbdWoph3Li7g3iAw47nXLL3fJdks5s0gfcgaJpZM4OS-3h
.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/33