Skip to content

Not displaying values until another button is pressed #216

Description

@javierfltineo

To reopen this other bug
#83

I'm using the autocomplete and the data it's displaying comes from a 3rd party API.
The issue I'm having is that when the first query runs it doesn't display anything and it just shows the NotFound message.
And in other cases, show Not Found message all times (and i checked that data var is filled)

So, I have the minQueryLength set to 3. When you start writing and hit the 3rd character we call a function that makes a 3rd party API call and returns the values. While all this is happening the input is set to loading, when the data comes back and it's ready to be used we set the input to not loading.
Even tho we have the data (in the correct format) the input will display the not found message, at this point if I press any button that doesn't modify the string (left arrow, right arrow, etc) it makes the query again and this time it displays the right information.

I cannot reply exactly in stackblitz, but the error is similar, since data is loaded in the variable, but autocomplete show non items template

https://stackblitz.com/edit/angular13-validation-rqxgbb

To reproduce, you can use this function
onChangeSearch(event: any): void {
console.log('onChangeSearch');
this.loadingAutocomplete = true;
console.log(event);
this.autocomplete = [];
this.http
.get(
https://fmpcloud.io/api/v3/search?query=${event}&limit=10&apikey=fec2976652d9896caec33a4c64bf1a69
)
.subscribe((data: any) => {
data.forEach((element) => {
this.autocomplete.push({
name: element.name,
});
});
setTimeout(() => {
console.log(this.autocomplete);
this.loadingAutocomplete = false;
}, 100);
});
}

And this html
<ng-autocomplete
[data]="autocomplete"
[searchKeyword]="'name'"
(inputChanged)="onChangeSearch($event)"
[itemTemplate]="itemTemplate"
[isLoading]="loadingAutocomplete"
[notFoundTemplate]="notFoundTemplate"
[minQueryLength]="3"

Name: {{ item.name }}

<ng-template #notFoundTemplate let-notFound>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions