RadListView - AngularComponent Bug on scrolling on iOS

[MentalRender]

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

I use RadListView with a custom component (ProductComponent) inside ng-template. When I press the (+) button inside ProductComponent its increase a "cant:number" variable, and the html template should change (using [visibility]=" cant > 0 ? 'visible' : 'collapsed' "), but nothing happens... only when I scrolling down RadListView and scrolling up again seems re-render ProductComponent and its works.

Any idea?

Gif showing the weird behavior:

Which platform(s) does your issue occur on?

Only iOS, Android works. Tested on iOS Simulator and iPhone6s (iOS 10.3.2)

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

• Progress NativeScript UI version: 3.5.10 (nativescript-ui-listview)
• CLI: 4.1.2
• Cross-platform modules: 4.1.0
• Runtime(s): 4.1.1 (iOS)

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

1. Navigate to MenuPage
2. Press addProduct button (nothing happens...)
3. Scrolldown RadListView
4. ScrollUp RadListView (...now its works)

Code involved

catalog.component.ts

<StackLayout>
  <Label text="Menu"></Label>
  <GridLayout height="100%">
    <RadListView [items]="dataItems">
      <ng-template tkListItemTemplate let-item="item">
        <StackLayout class="m-2">
          <product [product]="item" (add)="addItem($event)"></product>
        </StackLayout>
      </ng-template>
      <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="180" spanCount="2"></ListViewGridLayout>
    </RadListView>
  </GridLayout>
</StackLayout>

product.component.ts

export class ProductComponent {
  @Input() product: Product;
  cant: number = 0;

  add() {
    this.cant++;
  }

  remove() {
    this.cant--;
  }

}

I also tried with

ngZone.run(()=>{
    this.cant++;
})

product.component.html

<AbsoluteLayout>
  <product-ui [src]="product"></product-ui>
  <Button text="➕" (tap)="add(product)"></Button>
  <Button text="➖" (tap)="remove()" [visibility]=" cant > 0 ? 'visible' : 'collapsed' "></Button>
  <Button [text]="cant" [visibility]=" cant > 0 ? 'visible' : 'collapsed' "></Button>
</AbsoluteLayout>

THANKS !

[tigrenok00]

Happens to us as well, following

[tsonevn]

HI @MentalRender, Can you provide sample project, which can be used for reproducing the case and shows, how are the data used in the ListView is structured?

Also, this case demonstrated on the GIF file seems to be expected for iOS. When you need to show and hide component dynamically for iOS, you should also refresh the ListView. This will reload the items, and the UI will be updated.

[tigrenok00]

@tsonevn I think refresh does solve it, however, it also reloads the list as you said and scrolls it back to the top. This refresh and then resetting the previous scroll position both provide the user with a bad user experience. Can you please comment on this? Is there a way to just "update the bindings" without reload the whole list? In our case we are binding the visibility property as well (on a label, not a button) and experience the same issue on iOS only.

[MentalRender]

Thanks for reply @tsonevn. Sure!

Hopefully, I provide you a simple project ready in a few hours (my real project is too big)

[MentalRender]

@tsonevn, I upload this repo.

Just for help you, my questions are:

1. Why REMOVE button not showing dynamically when I press ADD button?
2. Why when I add some Pizza and scroll down, scroll up (or rotate device) its the Burguer selected?

I think second question is about new ObservableArray... but Im not sure

Sorry for my english...

[tsonevn]

Hi @MentalRender @tigrenok00, I tested the sample project on my side and was able to recreate the issue. I will mark this as a bug. For now, I would suggest keeping track of the problem.