SegmentedBar *INSIDE* ListView - crashes on scrolling

[tsonevn]

From @chrisvor on July 15, 2017 5:47

Did you verify this is a real problem by searching [Stack Overflow]

Yes, I could not find something related

Tell us about the problem

When I use a SegmentedBar component INSIDE a ListView (i.e. as part of the template definition), when the ListView is first displayed everything is normal. As soon as I try to scroll down, at the moment that a new listview row is about to be shown, the app crashes with an error:

"Error: View already has a parent. View: [object Object] Parent: SegmentedBar(252)".

I suspect this has something to do with the recycling functionality that exists in the ListView control, and somehow when the new row is about to be displayed by recycling the one just gone off the screen, the SegmentedBar control that was inside the "old" instance is not properly "cleared" so that a new parent can be assigned to it, hence the error.

Which platform(s) does your issue occur on?

iOS
Android not tested

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

• CLI: 3.1.1
• Cross-platform modules: 3.1.0
• Runtime(s): IOS: 3.1.0, Android: 3.1.1
• Plugin(s):
  "dependencies": {
  "angular/animations": "~4.1.0",
  "angular/common": "~4.1.0",
  "angular/compiler": "~4.1.0",
  "angular/core": "~4.1.0",
  "angular/forms": "~4.1.0",
  "angular/http": "~4.1.0",
  "angular/platform-browser": "~4.1.0",
  "angular/router": "~4.1.0",
  "nativescript-angular": "^3.1.1",
  "nativescript-couchbase": "^1.0.18",
  "nativescript-theme-core": "^1.0.4",
  "reflect-metadata": "~0.1.8",
  "rxjs": "^5.4.2",
  "tns-core-modules": "^3.1.0",
  "zone.js": "~0.8.2"
  }

(note: in the list above I removed the "@" prefix on the "angular" dependencies as it wasn't showing in this post)

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

Just populate the items array with more than what would fit on the screen and scroll the listview

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<ListView [items]="recipe" class="list-group">
    <ng-template let-ingr="item" let-i="index">
        <GridLayout rows="*" columns="*,200" width="500" class="list-group-item" [id]="i" [class.disabled]="ingr.avl==0" [visibility]="ingr.avl>0 ? 'visible' : 'collapsed'">
            <Label [text]="ing(ingr.iid,'dsc')" fontsize="12" fontweight="bold" backgroundcolor="#ffffff" row="0" col="0" style="text-align:left"></Label>
            <SegmentedBar #optbar [items]="ingr.optOptions" [selectedIndex]="ingr.optSel" (selectedIndexChange)="onOptSel($event, i)" row="0" col="1"></SegmentedBar>
        </GridLayout>
    </ng-template>
</ListView>

Copied from original issue: NativeScript/NativeScript#4556

[tsonevn]

From @chrisvor on July 15, 2017 6:6

The "recipe" items array is an array of type ProdIngr as below:

export class ProdIngr {
constructor(
public iid: number,
public avl: number,
public sng: number,
public dbl: number,
public udt: Date,
public optOptions: any,
public optSel: any) {}
}

avl has a value of "1" if the item is "available" and "0" if not. This controls the visibility of the row in the listview.

optOptions is itself an array of SegmentedBarItem, with 3 options with title "None", "Add", "Extra".
optSel will be initialised with a default value on setup, and will get the selected index of the SegmentedBar when the user selects one.

Each row in the listview has a SegmentedBar showing the options (and selected option) for the individual row element (prodIngr instance)

[tsonevn]

Hi @chrisvor,
I tested this scenario on my side and indeed there is an issue while using SegmentedBar inside the ListView template for NativeScirpt Angular 2 project. This problem is reproducible only on iOS, You could keep track on the issue for further info.

Attaching sample project, which could be used for debugging.
Archive.zip

[chrisvor]

Thanks for the update. I'll be on the lookout for the fix :)
Thanks again :)

[chrisvor]

Any updates on this bug? Anything I can do to at least provide a temp fix on my setup until it is fixed in the core ?
Thanks!

[Codex-]

Bumping this issue to see if anyone had any luck with resolving this or working around it?

Recently moved from NS5 with NA 8.0.3 to latest, so was definitely working as expected with 8.0.3.

Oddly, the crash only happens on Android for me.

[Codex-]

Worked out the issue, opening a PR.