Nativescript-ui-feedback: [Android] RadListView itemSelected terminate App when use goBack() method

[kefahB]

Hi,

In some case the navigation with a backward that problem (when we have 3 pages) and we will GoBack from the last page are displayed.

1. home page : we have some items in ListView
2. itemsViewer : get the index from navigation context and display result on a RadListView
3. itemsDetails : show the details for a selected item

PROBLEM :
The problem will occur once we are in the last page itemsDetails, if we press back button with a goBack()function the app will crash on android with the error :

02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.callJSMethodNative(Native Method)
02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1120)
02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1000)
02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.callJSMethod(Runtime.java:987)
02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.callJSMethod(Runtime.java:967)
02-07 20:13:14.119 31632 31632 E AndroidRuntime:    at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: com.tns.NativeScriptException: 
System.err: Calling js method onItemIsSelectedChanged failed
System.err: 
System.err: TypeError: Cannot read property '0' of undefined
System.err: File: "file:///data/data/---/files/app/tns_modules/nativescript-ui-listview/ui-listview.common.js, line: 482, column: 25
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'RadListView.getItemAtIndex', file:'file:///data/data/---/files/app/tns_modules/nativescript-ui-listview/ui-listview.common.js', line: 482, column: 26
System.err:     Frame: function:'ListViewSelectionChangedListenerImpl.onItemIsSelectedChanged', file:'file:///data/data/----/files/app/tns_modules/nativescript-ui-listview/ui-listview.js', line: 950, column: 41

There is solution, is to use normal navigation with navigate method, but is not really cool because the history list will be affected, and after the navigation to page 2 itemsViewer, if we press GoBack button we will return to the page 3 itemsDetails !!!

Please try the Playground for more details :

Playground here

TNS : `5.1.1`
"tns-android": {
      "version": "5.1.0"
}

[kefahB]

I think the problem come from itemSelected, if we get data from remote, the app will crash .. if we get the result from variable that we prepared manually !! once we selectd an item we will navigate to details page, HERE if we click go back button goBack() method once we are in items page, the itemSelected will trigger and navigate to detail page !

Please try playground here and change the binding data in constructor with an array in itemsViewer/ItemsViewerViewModel.ts :

constrocutor() {
super();
countries: { name: string, imageSrc: string }[] = [
        { name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
        { name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
        { name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
        { name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
        { name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
        { name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
        { name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
        { name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
        { name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
        { name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
        { name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
        { name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
        { name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
        { name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
        { name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
        { name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
        { name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
    ];
this.set("countries", countries);
}

[kefahB]

@tsonevn do you have any idea about this issue ?

[tsonevn]

Hi @kefahB,
I was able to recreate the issue with the attached project. I will mark this as a bug and we will investigate further the case. I also noticed that this is happening only when you set up the bindingContext on Page's loaded event. I would suggest using navigatedTo event instead of loaded. For example:

<Page class="page" navigatedTo="onNavigatedTo" xmlns:lv="nativescript-ui-listview"
    xmlns="http://www.nativescript.org/tns.xsd">
....
</Page>

import { EventData } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
import { ItemsViewerViewModel } from "./ItemsViewerViewModel";

export function onNavigatedTo(args: EventData) {
    let page = <Page>args.object;
    let context = page.navigationContext;
    page.bindingContext = new ItemsViewerViewModel(context.index);
}

[kefahB]

Hi @tsonevn,
I already tried to set navigatedTo but the problem still with other error :

System.err: com.tns.NativeScriptException: 
System.err: Calling js method onSelectedDatesChanged failed
System.err: TypeError: Cannot read property 'getEventsForDate' of undefined

[Kaique-Itisuke]

Hello @kefahB,
I think i found a way to temporary fix this problem (or atleast avoid the crash), just deselect all the items with deselectAll() before navigating to details page

It works for me with nativescript-vue:

onItemSelected({ index, object }){
    let itemSelected = this.itemList.getItem(index);
    object.deselectAll();

    this.redirectToDetails(itemSelected.id);
}

[kefahB]

@Kaiquel2 Thank for response but I work for a commercial use and I prefer if there is a commit from NS team.

@tbozhikov @tsonevn do have some change for this issue ? the App crash !

Thanks

[tsonevn]

Hi @kefahB,
Can you check if you will be able to recreate the issue with latest NativeScript - 5.3 and nativescript-ui-listview-6.1.0?

[kefahB]

I will check and comeback ;)

[kefahB]

I confirm .. is worked :-) no crash anymore 👍
Testing on API 26 and 23

Just the previous page is loaded on comeback .. that make a little refresh on listview

[tsonevn]

@kefahB, I am glad to hear that the problem is resolved.
I think that we can close the issue for now. If the problem appears again, I will reopen it.