Why do ion-refresher and ion-infinite-scroll cause a scroll to top?

I have an application in ionic 5, in the mnia page I have a list with an ion-refresher and an ion-infinite-scroll working simultaneously. After updating the list with the refresher, if I reach the bottom of it, an unexpected scroll to top is triggered. How can I remove this unwanted behavior are there mechanisms by which the two components conflict?

    <ion-header>
        <lea-page-header [detailPage]="false"></lea-page-header>
    </ion-header>
    
    <ion-content>
        <!-- Header con ricerca -->
        <div class="news-list-header">
            <ion-toolbar *isLogged>
                <ion-segment (ionChange)="changeTab($event)" value="all" mode="md">
                    <ion-segment-button value="all">{{ 'newsList.allSegment' | translate }}
                    </ion-segment-button>
                    <ion-segment-button value="favorites">{{ 'newsList.favorites' | translate }}
                    </ion-segment-button>
                    <hr>
                </ion-segment>
            </ion-toolbar>
            <ion-toolbar>
                <div class="filters">
                    <form [formGroup]="filtersForm">
                        <ion-searchbar name="searchValue"
                                       formControlName="searchValue"
                                       inputmode="search"
                                       mode="ios"
                                       placeholder="{{ 'newsList.search' | translate }}"
                                       (ionClear)="removeKeyboard()"
                                       (ionCancel)="removeKeyboard()"
                                       (keyup)="onKey($event)">
                        </ion-searchbar>
                    </form>
                    <div *isLogged class="filter-btn">
                        <button class="lea-btn btn-primary ion-activatable ripple-parent" (click)="presentFilterModal()">
                            <span>
                                <ion-icon name="options-outline"></ion-icon>
                            </span>
                            <ion-ripple-effect></ion-ripple-effect>
                        </button>
                        <ion-badge *ngIf="filtersForm.get('topics').value.length > 0">
                            {{ filtersForm.get('topics').value.length }}</ion-badge>
                    </div>
                </div>
            </ion-toolbar>
        </div>
        <ion-refresher slot="fixed"
                       (ionRefresh)="doRefresh($event)">
            <ion-refresher-content></ion-refresher-content>
        </ion-refresher>
        <!-- Se non ci sono news pubbliche -->
        <div class="ion-text-center ion-margin-top" *ngIf="noPublicNews && !news.length && !filtersForm.value.searchValue">
            <ion-chip>
                <ion-label>{{ 'newsList.noPublicNews' | translate }}</ion-label>
            </ion-chip>
        </div>
        <!-- Lista news -->
        <ion-list class="news-list"
                  *ngIf="(favourite ? newsFavourite : news).length && !isSearching"
                  lines="none">
            <ion-card *ngFor="let news1 of (favourite ? newsFavourite : news); index as i"
                      (click)="forward(news1)"
                      class="news lamboNews ion-activatable ripple-parent"
                      [ngClass]="{'top-news': news1.topNews, 'blue': news1?.codTopic?.includes('CORPORATE'), 'green': news1?.codTopic?.includes('PEOPLE')}">
                <div class="image" [style.background-image]="getSafeURL(news1.rollupURL)"></div>
                <ion-card-content>
                    <div *ngIf="news1.topNews" class="date ion-text-left">
                        {{ news1.publishDate | date: 'dd MMMM yyyy'}}
                    </div>
                    <ion-chip *ngIf="!news1.topNews"
                              [ngClass]="{'blue': news1?.codTopic?.includes('CORPORATE'), 'green': news1?.codTopic?.includes('PEOPLE')}">
                        <ion-label>{{ news1.topic }}</ion-label>
                    </ion-chip>
                    <div class="title ion-text-left">
                        {{ news1.title }}
                    </div>
                    <div>
    
                    </div>
                </ion-card-content>
                <ion-toolbar>
                    <ion-chip slot="start"
                              *ngIf="news1.topNews"
                              [ngClass]="{'blue': news1?.codTopic?.includes('CORPORATE'), 'green': news1?.codTopic?.includes('PEOPLE')}">
                        <ion-label>{{ news1.topic }}</ion-label>
                    </ion-chip>
                    <div slot="start" *ngIf="!news1.topNews" class="date">
                        {{ news1.publishDate | date: 'dd MMMM yyyy'}}
                    </div>
                    <ion-buttons slot="end" *isLogged>
                        <ion-button (click)="onSetFavourite(news1)">
                            <ion-icon *ngIf="news1.favourite" name="star"></ion-icon>
                            <ion-icon *ngIf="!news1.favourite" name="star-outline"></ion-icon>
                        </ion-button>
                    </ion-buttons>
                </ion-toolbar>
                <ion-ripple-effect></ion-ripple-effect>
            </ion-card>
        </ion-list>

        <!-- Infinite scroll -->
        <ion-infinite-scroll threshold="50px" (ionInfinite)="moreNews($event)">
            <ion-infinite-scroll-content
                    loadingSpinner="bubbles"
                    [loadingText]="'infiniteScroll.moreDaraLoading' | translate">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-content>
    <lea-toolbar-navigation></lea-toolbar-navigation>

2 posts - 2 participants

Read full topic