ionic-framework: VirtualScroll broken with pipe filter

#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

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

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

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 17 (2 by maintainers)

Most upvoted comments

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

MarcWadai on Aug 27, 2017

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 on Jul 18, 2017

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.

TimeTravelersHackedMe on Nov 3, 2017

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:

Give your VS an Id <ion-list #virtualScroll ...
Import it in your class: import { VirtualScroll } from 'ionic-angular'; import { ViewChild } from '@angular/core'; @ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;
Resize with a timeout when you make changes to the list items:

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

daveshirman on Nov 8, 2017

@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!

daveshirman on Aug 9, 2017

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.

jgw96 on Jul 10, 2017