Search Issue - Unable to type fast [VUE JS]

[JohnDotOwl]

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 usefor tailwind ui stack but still face the same issue.

bug.mov

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"
    }
}

NPM install

npm WARN [email protected] requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of algoliasearch@>= 3.32.0 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@types/browser-sync/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})

[JohnDotOwl]

I'm looking at Debouncing searchbox

Ref : https://issueantenna.com/repo/meilisearch/instant-meilisearch/issues/644

[bidoubiwa]

Hey @Rainbowhat sorry for the delay in my answer. This issue has been discussed and solved here meilisearch/meilisearch-js-plugins#644

I hope it helps you out

[bidoubiwa]

Re-opening because it is asked to much! Even if it is not linked to instant-meilisearch it might help user understand faster how to solve the issue.

[bidoubiwa]

Here is an example with Vue3 of the debouncer method of algolia:

https://codesandbox.io/s/ms-vue3-is-0293zk?file=/src/App.vue