Graphical glitch when using async data retrieval and debouncing

[tbl0605]

Graphical glitch when using async data retrieval and debouncing

[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 :)

[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)