search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.81k stars 1.18k forks source link

AutoComplete: Easy to get AutoComplete stuck in a loading state #5601

Open matthew-dean opened 5 months ago

matthew-dean commented 5 months ago

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

  1. Go to Stackblitz link
  2. Click the dropdown

Expected behavior

I would call this 2 bugs

  1. Loading state can be triggered and cannot be "controlled" by the loading property
  2. An empty array triggers the loading state
slavco86 commented 4 months ago

Any update on this from anyone at PrimeTek?

matthew-dean commented 4 months ago

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.

  1. You must provide a different list to suggestions with @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. 🙃
  2. YOU MUST PROVIDE A DIFFERENT LIST TO suggestions WITH @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.

slavco86 commented 4 months ago

Hopefully, this is something they can improve in V4? 🙏

If only we had at least some reaction from PrimeTek here... 😞

uncoded-apps commented 3 months ago

Thanks for this pointer, saved me a lot (more) head scratching.

matthew-dean commented 3 months ago

@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.

slavco86 commented 3 months ago

😢

anantakrishna commented 2 months ago

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!

matthew-dean commented 2 months ago

@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.

kaelonR commented 4 weeks ago

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.