AutoComplete async loading can't find 'android' of undefined

[sarawieckowska]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

when trying to load data asynchronically, the app works and suggestions load into sugestionview, but first and the second requests throw this error into my console

Unhandled Promise rejection: Cannot read property 'android' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'android' of undefined TypeError: Cannot read property 'android' of undefined
    at file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-ui-autocomplete/ui-autocomplete.js:131:53
    at ZoneDelegate.invoke (file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
    at Zone.run (file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
    at file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:761:57
    at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
    at Zone.runTask (file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
    at drainMicroTaskQueue (file:///data/data/org.nativescript.project/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)

The app doesn't crash, but this is not looking good and can lead to crashes in the future.

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

Yes

Which platform(s) does your issue occur on?

Android

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

• Progress NativeScript UI version: nativescript-ui-autocomplete: ^3.9.0
• CLI: 4.2.4
• Cross-platform modules: 3.4.0
• Runtime(s): 4.2.0

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

  1. Start the application ..
  2. ...

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

(You can paste entire code snippets or attach a runnable project)

ngOnInit() {
this.myField.autoCompleteTextView.loadSuggestionsAsync = (text: string) =>
            new Promise((resolve, reject) => {
                this.myHttpService.getResults(text, mycomponentParam).subscribe((results: any) => {
                    this._searchResults = results.data;
                    this.searchResults = new ObservableArray<TokenWithId>();
                    results.data.forEach((elem) => {
                        this.searchResults.push(new TokenWithId(elem.name, null, elem.id));
                    });
                    resolve(this.searchResults);
                });
            });
}

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

export class myHttpService {
    constructor(private httpClient: HttpClient) {}

    getResults(searchQuery: string, additionalParam: string) {
        const params = new HttpParams({
            fromObject: {
                // my special snowflakes
            }
        });
        return this.httpClient.get('https://my.api.address.com/api/v1/results', {params});
    }
}

[tsonevn]

Hi @sarawieckowska, I have tested this case with our sample project, however, I was unable to recreate such an issue. Can you provide a sample project, which can be used for debugging?

[sarawieckowska]

Hi @tsonevn, I've managed to recreate a sample project in the Playground, please find it here https://play.nativescript.org/?template=play-ng&id=VRZiHM&v=2

[tsonevn]

Hi @sarawieckowska, This problem seems to be related to using an ObservableArray while loading the data from the promise. I will mark this as a bug. Meanwhile, try replacing the ObservableArray with the core JavaScript Array. For example:

this.dept.autoCompleteTextView.loadSuggestionsAsync = (text: string) =>
            new Promise((resolve, reject) => {
                this.queryService.getResults(text).subscribe((searchResults: any) => {
                    this._myResults = searchResults;
                    const myResults = new Array<TokenWithId>();
                    this._myResults.forEach((elem) => {
                        myResults.push(new TokenWithId(elem.name, null, elem.id));
                    });
                    resolve(myResults);
                });
            });

[sarawieckowska]

Hi @tsonevn, Of course. Thank you for your help, meanwhile I'll replace the ObservableArray.

[safaldas]

+1

[houstona]

Any news on resolving this? Switching from ObservableArrays just causes the following error for me:

System.err: Calling js method onCreateViewHolder failed
System.err: 
System.err: Error: Expecting a valid View instance.