nativescript-community / nativescript-community/ui-collectionview

iOS click scrolls to top after loadMore items disappear

Open
#14 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
62
Forks
19
Avg merge
2d 15h
Merged PRs (30d)
2

Description

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';
    }
  }
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked demo-ng.zip on iOS 14 and reproduce the problem through onLoadMoreItems, then tapping the top bar. Trace the CollectionView iOS handling around load-more updates and scrolling. Done means items before and after loading remain visible when scrolling to the top.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.