Ionic-framework: ion-virtual-scroll only updates list when scrolling

Created on 26 Jun 2018 · 4Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)
    @ionic/cli-utils  : 1.7.0
    ionic (Ionic CLI) : 3.7.0
System:
    Android SDK Tools : 26.1.1
    Node              : v10.5.0
    OS                : macOS High Sierra
    ios-deploy        : 1.9.0
    npm               : 6.1.0

Describe the Bug
I'm using "@ionic/core": "4.0.0-alpha.7" and "@stencil/core": "^0.9.11"
When using ion-virtual-scroll the initial list displays fine. When I change the content of the array which is bound to the ion-virtual-scroll nothing happens. The displayed list is only updated when you actually try to scroll it.

Steps to Reproduce
Steps to reproduce the behavior:

The page shows a list of 1000 items
Click on the toolbar button once to show only the even numbers
Nothing seems to happen
Scroll the list and you will see the filtered list with only the even numbers.

Related Code
I created a small app based on the ionic pwa toolkit to display the issue: https://github.com/yannickvg/ionic-virtualscroll

Expected Behavior
The list should be update whenever the data supplied to it changes.

Additional Context

Source

yannickvg

👍3

Most helpful comment

To circumvent that bug, I'm using:

...
virtualScrollEl.items = data;
const event:any = (new window['Event']('resize') as any);
window.dispatchEvent(event);

kael on 6 Jul 2018

👍3

All 4 comments

Try manually updating the page after the change
this.applicationRef.tick();

malwatte on 6 Jul 2018

To circumvent that bug, I'm using:

...
virtualScrollEl.items = data;
const event:any = (new window['Event']('resize') as any);
window.dispatchEvent(event);

kael on 6 Jul 2018

👍3

Is this issue still exist in beta.17?

paulstelzer on 3 Dec 2018

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!