Skip to content

Not displaying values until another button is pressed #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
javierfltineo opened this issue Jan 9, 2023 · 1 comment
Open

Not displaying values until another button is pressed #216

javierfltineo opened this issue Jan 9, 2023 · 1 comment

Comments

@javierfltineo
Copy link

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>

@javierfltineo
Copy link
Author

https://user-images.githubusercontent.com/11553942/211410710-f8071379-6600-4a9d-bc52-c41d3a63d1e0.mp4
This is the test in my local environment with left/right arrows

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant