primevue
primevue copied to clipboard
primefaces
AutoComplete: Easy to get AutoComplete stuck in a loading state
Describe the bug
Probably a subset of this issue. A minimal reproduction is:
<AutoComplete :suggestions="[]" dropdown :loading="false" />
If you click the dropdown, AutoComplete gets stuck in a loading state, even though loading is explicitly false.
Reproducer
https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-nkhjls?file=src%2FApp.vue
PrimeVue version
3.47.2
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
Chrome 123
Steps to reproduce the behavior
- Go to Stackblitz link
- Click the dropdown
Expected behavior
I would call this 2 bugs
- Loading state can be triggered and cannot be "controlled" by the loading property
- An empty array triggers the loading state
Okay, I've figured out I think all the quirks for this quirky component, and this is how you have to get it to work.
- You must provide a different list to
suggestionswith@complete. I finally found this in the documentation, and to me this is: a) nutters, b) per usual, completely contrary to the API of other PrimeVue components; namely the search functions of Dropdown, which searches the list you provided. 🙃 - YOU MUST PROVIDE A DIFFERENT LIST TO
suggestionsWITH@complete. This includes if you click the dropdown, which sends an empty query. If you do not mutate / attach a new array per dropdown click, the component will forever get stuck in a loading state. So, this means, if, when you click the dropdown array right away, and there's no reason to mutate the suggestions, you still MUST mutate the array like:suggestions = [...suggestions]🙃
So, the requirement of @complete is counter-intuitive. The requirement of attaching new arrays is counter-intuitive. And the API doesn't match any other component, but that's the cost of using PrimeVue.
Hopefully, this is something they can improve in V4? 🙏
If only we had at least some reaction from PrimeTek here... 😞
@slavco86 In my experience, PrimeTek has especially poor project management, which includes issue management, so it's very unlikely even for critical issues to get addressed. But still worth documenting for other users.
I finally found this in the documentation
Can't find that. Can you kindly give a link and a quote?
P.S. Thanks for this discovery!
@anantakrishna Just saw your comment.
To be honest, I went back to the v3 documentation and I didn't really see it, so I don't remember what I was referring to. It's possible that I was just referring to:
In addition, suggestions property and a complete method are required to query the results.
From: https://v3.primevue.org/autocomplete/
...but that said, it doesn't really say anything about returning a new suggestions array every time. I think I just intuited that from the examples.
Has there been any progress on a resolution for this issue? Having to change the array after each and every complete event is currently making it hard to combine AutoComplete with a wrapper that has typescript types to enforce the shape of the suggestion objects.
It's also making it difficult to 'abort' a search and return nothing when the input fails certain validations, because when an empty array is changed to another empty array, the loader icon will show indefinitely making the user think that they're waiting for search results from the API.
I've currently made a hacky workaround, by insert null into the suggestions array (casting the item to unknown to silence the typescript compiler, as we've written our wrapper to not allow random values in the suggestions array), waiting until the next tick, and then clearing the array again. While at the same time using a custom slot just to suppres the 'null' suggestion and tell the user that there are no results instead. This just feels wrong in my opinion.
