bug: Page is automatically scroll up to the top of the screen when ion-list is updating from a backend service call.

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When ion-list is updating from a backend call, page (ion-content) is automatically scroll to the top of the page from the current location.

Expected Behavior

Page(ion-content) should stay on it’s current location when the list is updated from a backend call.

Steps to Reproduce

Steps: npm install

Go to the ‘server’ folder inside repo and run node dummyServer to run the dummy server. (port number is 8887) Change URL from src/app/const/const.enum.ts if needed.

Then run, ionic serve

go to the bottom of the page and wait until service call completed.

Code Reproduction URL

https://github.com/mandis2010/auto-scrollup

Ionic Info

Ionic:

Ionic CLI : 6.19.0 Ionic Framework : @ionic/angular 6.1.6 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : not installed @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v14.17.6 npm : 6.14.15 OS : Windows 10

Additional Information

Below same issue is happening for me as well. This issue is happing only after upgrading to IONIC 6.

Click Here

[lincolnthree]

@mandis2010 I noticed you are not using trackBy in your *ngFor loop. This may be the cause of your issue, as without trackBy, Angular will re-render the entire list, rather than only refreshing and updating as needed.

This could cause an issue where the list is temporarily blank/empty, and the list height is reduced to 0px, at which point scroll will be reset and you’ll be back at the top because the list no longer exceeds the height of the page. Essentially the the page is “too short” to stay scrolled down.

https://dzone.com/articles/how-to-use-trackby-with-ngfor-in-angular-8

You could also try setting a manual CSS height on your list to verify this.

[DwieDima]

Your reproduction URL returns 404. Is your project private? And you could try this suggestion