"lost" characters when typing fast / on slow connections

I’ve been having issues in vue instantsearch v2 (beta3) with the ais-search-box, namely that when on a slow connection, some characters typed get “swallowed up”.

I’m still having trouble understanding the flow of events within the whole algolia vue client - if you could at some point add a visual diagram or textual explanation to the docs on how events travel through the system, that would be very helpful!

What I’ve deduced so far is that since the <input> inside <ais-search-box> is bound via v-model to currentRefinement, its value gets updated when the state changes, as would legitimately be the case when for ex. after parseURL() has run.

However in my use case parseURL runs just once, as it should, when the page is loaded. Nevertheless I can see visible flashing of the input content on each keystroke, so I see there must be some loop going on resaving the value after it has been typed.

The problem gets worse when I emulate a slow 3g connection via dev tools - sometimes hardly anything gets typed. My impression is that the input gets overwritten once a search response arrives from Algolia.

I wish I could give you codesandbox to reproduce, but that would be a lot of work as my custom search code is pretty huge by now. I can do it if you really need it.

For now my question is mainly under which circumstances would state be updated after receiving a search query, and why would it even update the query string value? All I’m saying is to me it makes no sense to change the value based on the search results, and I’m not doing that in my code as far as I am aware.

PS: I worked around the issue by using a debounced search box but obviously that is not exactly a clean and 100% reliable way.

Hi @loka,

I didn’t manage to reproduce the issue with the ais-search-box and the query. We are aware of an issue with facets and everything tied to the results but not with the query. We do trigger a new render when we detect that the search is stalled. This render is triggered with the last results (and the last state). But the thing is that the query is not read from those values. It is read from an object that should be up to date. Could you mind create a reproducible example? Here is a template.

Note that the input has to be controlled, because of the URLSync. It’s not only used on the initial render but also on the popstate event. We want to trigger a new render with the previous state derived from the URL.

Thanks!

1 Like