Ionic-framework: VirtualScroll Scrolling / display issues when filtering list

[ghenry22]

Ionic version: (check one with "x")
[ ] 1.x
[X ] 2.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 a list is filtered by a search query, if you are at the top of the list when filtering all works fine and results update. If you are part way down the list and the length of results returned by the filter is LESS than you would need to get to your scroll position BEFORE filtering you get a blank screen. You can still scroll up and down but all you will see is white, scroll events don't fire from ion-content. It's like the content area has been lost off the top of the screen somewhere.

If you then clear the search filter so the list goes back to it's original length (ie long enough to reach your original scroll position) scroll up and down a bit and all the items reappear and scroll events start firing again as usual.

Only happens with virtualScroll, ngFor lists behave as expected under the same test.

Expected behavior:

When you filter the list it updates and shows the filtered results correctly with the scroll position at the top of the filtered list.

Steps to reproduce:
Create a list of say 200 items so you have a decent amount of length.
Add an ion-search box and a basic search to filter the list as per the standard ionic component docs.
Scroll halfway down the list
Perform a search which will return less items than it takes to reach your previous position in the list (ie scroll down 50 items and perform a search that returns 5 items).
The screen will go white with no items shown, scroll events stop firing.

On iOS UIWebview the navbar will scroll off the top of the screen as if it is no longer fixed. Basically it looks like ion-content has moved off the top of the view port somewhere and you can't get back to it until you restore the list of data to be longer than needed to reach your current scroll position.

I see the same symptoms on BOTH Android and iOS UIWebview.

Does not reproduce on plunker but here is a plunker setup with a simple search demo with virtual scroll, straight from the ionic demo's page but with a bit longer list of data and virtualScroll instead of ngfor. Just copy and paste this into a new ionic app and you can reproduce the same behaviour on both iOS and Android.

http://plnkr.co/edit/OPYLBepHp000CDCOVCL6?p=preview

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

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[mpaland]

Do you have a plunker?

[ghenry22]

@mpaland @brandyscarney - updated with ionic info and a plunker. plunker does not reproduce the issue but you can start a new project and just copy and paste the template and ts into it and run on iOS emulator or an ios or android device and it will reproduce by simply scrolling down a few pages in the list and searching for "test" (which only returns 2 items so not enough to reach the pre-search scroll location).

[zakton5]

+1 - Can verify that this happens.

[mariohmol]

Hi there.. having same issue on the tabs .. when i scroll down shows the rest content is blank.

The same page outside of the tabs works.

I have a slightly different ionic version..

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.1
ios-sim version: 3.1.1
OS: macOS Sierra
Node Version: v6.3.1
Xcode version: Xcode 8.3.2 Build version 8E2002

[mariohmol]

Hi there!! Could figure it out.. my case was.. i had a order.html with tabs.. and a orderview.html with info that will be inside a tab.. in orderview.html i had just the html.. i wrapped with <ion-content> and the scroll is working withou the blank after scroll

[ghenry22]

@mariohmol this isn't the same issue I am talking about, I have ion-content everywhere it needs to be. This relates specifically to virtual-scroll list behaviour when the list is filtered with a search query.

[ghenry22]

This behaviour is now slightly different.

Follow the same steps to reproduce though.

Create a virtualscroll list with a few hundred items
scroll down about 50 items
perform a search/filter on the list which will return 2 items
the screen goes blank.
the list does filter correctly but the returned 2 items are too far off the top of the screen and you cannot scroll to them.
if you then clear the search term to return to the unfiltered list the original virtualscroll list reappears with the scroll location the same as it was prior to searching/filtering.

The header no longer scrolls off the page and remains correctly fixed now.

[fifafu]

I can confirm this issue as described by @ghenry22 in v3.5.0. Is there any workaround?
In case not, can somebody point me to the part of the code that is causing this? I'd then try to fix it.

[junerockwell]

This issue still exists in Ionic version 3.6.0. The app also crashes and Xcode has Message from debugger: Terminated due to memory issue in the console. And, the app needs to be restarted. My app is run and tested on an iPhone 6S.

[flowli]

Unfortunately, this still happens with nightly 3.7.1-20171010. Is there any glimpse of hope? ;-)

[elin-y]

I think this is fixed by #12917

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

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