Issue : “lost” characters when typing fast

[ThomasKientz]

Bug 🐞

What is the current behavior?

When typing fast, some characters are missing in the searchbox with a custom renderer

<ais-search-box >
  <template #default="{ currentRefinement, isSearchStalled, refine }">
    <input
      placeholder="search"
      type="search"
      :value="currentRefinement"
      @input="refine($event.currentTarget.value)"
    />
    <span :hidden="!isSearchStalled">Loading...</span>
    </template>
</ais-search-box>

Eg : Typing "house" fast. (reload sandbox when you try to clear cache between you tests).

I have link my production index in the repro. You can see the issue in production here (open sourced) : https://mdisearch.com/

https://user-images.githubusercontent.com/10157845/189675208-12299b32-64ba-42b2-af1b-ba0bebf69ddc.mov

Sandbox

https://codesandbox.io/s/algolia-reproduction-issue-kt95nc

[dhayab]

Hi, is there a reason you use a custom input element in <ais-search-box>?

The currentRefinement value exposed in the slot scope is set by the results coming from Algolia, which means that in suboptimal network settings or when typing too fast, it might override the most recent value with the one that was taken into account in the latest query.

In our default template we handle this by giving priority to the local input value as long as its focused, so if you change the template, you would need to re-implement this behavior.

[ThomasKientz]

@dhayab Hi, reason is to customize in real world apps like https://github.com/ThomasKientz/mdisearch/blob/main/front/src/App.vue#L77

In our default template we handle this by giving priority to the local input value as long as its focused, so if you change the template, you would need to re-implement this behavior.

Could you pinpoint me to a specific line please ? I will try to implement it as well.

Thanks !

[ThomasKientz]

Got it : https://github.com/algolia/vue-instantsearch/blob/master/src/components/SearchBox.vue#L162

[ThomasKientz]

@dhayab pushed a PR for addressing this.

[Haroenv]

I don't think this can fully be solved without a custom widget, a slot will always have too little information to make a truly correct search box. It could be interesting to change the documentation to migrate from slot to custom widget for a custom search box, but for now this issue should be enough reference for anyone else falling into this issue.

Thanks for reporting Thomas!