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.

https://user-images.githubusercontent.com/3077812/167795636-2d3d5868-956c-4197-b127-d71e5a748728.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 algoliasearch-helper@3.8.2 requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN instantsearch.js@4.40.5 requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN vue-instantsearch@4.0.0 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: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/@types/browser-sync/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: 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 https://github.com/meilisearch/instant-meilisearch/issues/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