iOS click scrolls to top after loadMore items disappear

[aPinix]

Which platform(s) does your issue occur on?

• iOS/Android/Both - IOS
• iOS/Android versions - iOS 14
• emulator or device. What type of device? - ATM I have only tried it on emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) - 7.0.11
• Cross-platform modules: (check the 'version' attribute in the node_modules/@nativescript/core/package.json file in your project) - 7.1.3
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) - 7.1.0
• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here) This plugin only - 4.0.16

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

On iOS, after one or more loadMoreItems, when clicked on the top bar to scroll to top, items before and after that loadMoredisappear.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

demo-ng.zip

https://user-images.githubusercontent.com/698523/105020592-66426980-5a3f-11eb-9ca8-8bd1bbc051a8.mp4

<GridLayout backgroundColor="#333">
  <CollectionView
    [items]="items"
    [rowHeight]="screenHeight"
    orientation="vertical"
    automationText="collectionView"
    [itemTemplateSelector]="templateSelector"
    (itemTap)="onItemTap($event)"
    (scroll)="onScroll($event)"
    (scrollEnd)="onScrollEnd($event)"
    (loadMoreItems)="onLoadMoreItems()"
    iosOverflowSafeArea="true"
    contentInsetAdjustmentBehavior="never"
    colWidth="100%"
  >
    <ng-template cvTemplateKey="full-width" let-item="item" let-index="index">
      <GridLayout
        [height]="screenHeight"
        [backgroundColor]="item.color"
        (tap)="onTap($event)"
      >
        <Label [text]="index + ': FULL-WIDTH'" class="text-center" fontSize="30" fontWeight="bold"></Label>
      </GridLayout>
    </ng-template>

    <ng-template cvTemplateKey="column-3" let-item="item" let-index="index">
      <GridLayout
        [height]="screenHeight"
        [backgroundColor]="item.color"
        (tap)="onTap($event)"
      >
        <Label [text]="index + ': COLUMN-3'" class="text-center" fontSize="30" fontWeight="bold"></Label>
      </GridLayout>
    </ng-template>
  </CollectionView>
</GridLayout>

import { Component, OnInit } from '@angular/core';
import { Screen, ScrollEventData } from '@nativescript/core';

@Component({
  selector: 'ns-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css'],
})
export class ItemsComponent implements OnInit {
  isScrolling = false;

  items = [
    { name: 'TURQUOISE', color: '#1abc9c' },
    { name: 'EMERALD', color: '#2ecc71' },
    { name: 'PETER RIVER', color: '#3498db' },
    { name: 'AMETHYST', color: '#9b59b6' },
    { name: 'WET ASPHALT', color: '#34495e' }
  ];

  screenWidth = Screen.mainScreen.widthDIPs;
  screenHeight = Screen.mainScreen.heightDIPs;

  constructor() {}

  ngOnInit(): void {}

  onTap(event) {
    if (!this.isScrolling) {
      console.log('TAP');
    }
  }

  onScroll(event: ScrollEventData) {
    this.isScrolling = true;
    // console.log('SCROLL');
  }

  onScrollEnd($event) {
    this.isScrolling = false;
    // console.log('SCROLL_END');
  }

  onItemTap({ index, item }): void {
    console.log(`ITEM ${index}: ${item.name}`);
  }

  onLoadMoreItems(): void {
    console.log('LOAD_MORE');
    this.items.push(
      { name: 'GREEN SEA', color: '#16a085' },
      { name: 'NEPHRITIS', color: '#27ae60' },
      { name: 'BELIZE HOLE', color: '#2980b9' },
      { name: 'WISTERIA', color: '#8e44ad' },
      { name: 'MIDNIGHT BLUE', color: '#2c3e50' },
      { name: 'SUN FLOWER', color: '#f1c40f' },
      { name: 'CARROT', color: '#e67e22' }
    );
  }

  templateSelector(item: any, index: number, items: any) {
    if (index < 2) {
      return 'full-width';
    } else {
      return 'column-3';
    }
  }
}

[farfromrefug]

@aPinix thanks will look at it. Though dont have time to do it anytime soon :s

[aPinix]

Thanks in advance ;)