Graphical glitch when using async data retrieval and debouncing

[tbl0605]

Hi, I recently created an autocomplete component for city names using vue-simple-suggest. I'm using async data retrieval (https://github.com/KazanExpress/vue-simple-suggest#async-example) and debouncing. It works great, except that sometimes I have graphical glitches (see my screenshots). I first thought it was because of the way I'm retrieving the data (or because of axios), but I have same problem when I rewrite my code using the fetch() function.

Step to reproduce:

1. go to https://codesandbox.io/s/bug-vue-simple-suggest-09ker
2. try to input 2 or 3 letters. You probably have to try again multiple times, the bug is pretty random, sometimes easy to catch, sometimes it can take a (very) long time
3. you should see following kind of glitches

PS: you can also try the fetch() version, but the bug is harder to reproduce with it: https://codesandbox.io/s/bug-vue-simple-suggest-2-eyuk8

[tbl0605]

I forgot to mention that I can reproduce this bug (at least) on latest versions of Chrome and Firefox :)

[tbl0605]

The issue disappears with my patch (I cannot reproduce the bug anymore). But you should consider it as a partial fix or workaround, because there is a real deeper problem in your code (I haven't tracked it down), the value of "isPlainSuggestion" seems (sometimes) not to be in sync (or updated soon enough) to reflect latest values retrieved from method getSuggestions(). So my patch will "hide" the real problem but not completly fix it.

For example, before my patch, you could have :

• "isPlainSuggestion" is set to true because getSuggestions() returned an empty array of values (setting it to true was buggy, my patch fixes that)
• getSuggestions() is called again and returns a non-empty array of values BUT those list of suggestions is (wrongly) drawn with "isPlainSuggestion" still set to true

Hope I'm clear enough :)

[tbl0605]

My guess for the real problem is that multiple calls to "await this.list(value))" can be done in a very short time and those promises can resolve in any order when the server api is a bit laggy. Probably getSuggestions() should return an object containing "isPlainSuggestion" and the list of suggestions, so that both would be synchronized and be updated at same time (and neither too early nor too late).

[tbl0605]

Hopefully last comment: I updated my patch so it can be taken as-is, without doing further code changes afterwards, even if I think that "isPlainSuggestion" should be updated outside of getSuggestions() at same time than this.$set(this, 'suggestions', newList)

[kaskar2008]

Hello, @tbl0605 Thanks for the reporting and such a deep dig into the bug :)

[tbl0605]

@kaskar2008, would it be possible to make a new release now that this patch is merged? Thank you for you great work :)