Vue - Lag Typing (Meili Search)

[JohnDotOwl]

https://user-images.githubusercontent.com/3077812/167888542-4d17f477-961d-4870-a37d-a11c6c4eae04.mov

When i try to type fast, it would automatically snapback and cancel my typing and replace the text with what the server respond with. I'm not sure where to look into as my configuration are almost identical to the demo located here https://codesandbox.io/s/ms-vue-is-1d6bi?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.vue

I don't have other JS files, so i don't think it's conflicting with others. I've tried disabling my alphine.js which i use for tailwind ui stack but still face the same issue.

sorry to post this here but the issue seems to be appearing depending on which vue-instantsearch version i set , at this moment certain version doesn't give issue on codesandbox but i can't seem to get it to work properly when i compile it on my laravel even with cache cleared and all. Any idea where i should look into to solve this issue ?

app.js

window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
import Vue from "vue";
import InstantSearch from "vue-instantsearch";

Vue.use(InstantSearch);
Vue.config.productionTip = false;

const app = new Vue({
    el: '#app',
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "postcss": "^8.2.12",
        "postcss-purgecss-laravel": "^2.0.0",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^2.1.2",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@meilisearch/instant-meilisearch": "0.6.0",
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/forms": "^0.3.2",
        "alpinejs": "^2.8.2",
        "vue-instantsearch": "4.0.0",
        "instantsearch.css": "7.4.2"
    }
}

You can test it here too https://codesandbox.io/s/ms-vue3-is-0293zk?file=/src/App.vue (vue 3)

[turzaizsolt]

We are experiencing the same issue. Did you manage to find a solution?

[nasimuddin01]

Facing the same issue in my app too. Any solution you guys managed to find?

[ymc-sise]

I am facing the same issue.

See movie here:

https://user-images.githubusercontent.com/1014016/175003982-69a8ca22-28ed-464e-a9c0-1b317394de32.mov

It happens even if I use the most basic setup (Vue3, no AlpineJS, no TailwindCSS, no jQuery, etc.):

<template>
  <AisInstantSearch
      :index-name="indexName"
      :search-client="searchClient"
  >
    <AisSearchBox />
  </AisInstantSearch>
</template>

But I have to say that I use a typesense search adapter and the response to the server takes around 200ms. When I type a new letter, the letter stays for this 200ms. When the response from typesense is back, in that short moment when the Vue model is updating, the letter is removed and added again.

When I use exactly the same DebouncedSearchBox component from here https://codesandbox.io/s/ms-vue3-is-0293zk?file=/src/App.vue:900-927 with a 10ms delay, then the flickering is gone.

    <AisInstantSearch :index-name="indexName" :search-client="searchClient">
            <DebouncedSearchBox delay="10" />
     </AisInstantSearch>

In my opinion, there is some problem in the $emit here https://github.com/algolia/vue-instantsearch/blob/master/src/components/SearchInput.vue#L27 or with the modelValue here https://github.com/algolia/vue-instantsearch/blob/master/src/components/SearchBox.vue#L156

But its just a best guess.

Please fix it.

[ymc-sise]

Update: I don't think it has something to do with debouncing as mentioned here https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch/#debouncing-search-results

It happens as well when typing very slowly:

https://user-images.githubusercontent.com/1014016/175019096-a1255417-2e4c-49f2-a251-611b9cfa288f.mov

And as written before, it also happens on a plain site with the default vue-instantsearch components and without Tailwind or Alpine or anything else. Unfortunately I can't test it without a typesense server.

I think the component is re-rendered unnecessary when the model value is updated.

[ymc-sise]

Thanks a lot. Your fix works for me.