From 85f8450a858460293fe0a564cb5fa8d24befe737 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 28 Mar 2022 11:22:40 +0200
Subject: [PATCH] Debounce tag input autocomplete

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/TagInput.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/src/components/Event/TagInput.vue b/js/src/components/Event/TagInput.vue
index ec4606fc4..9d4a6671c 100644
--- a/js/src/components/Event/TagInput.vue
+++ b/js/src/components/Event/TagInput.vue
@@ -21,7 +21,7 @@
       maxlength="20"
       maxtags="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-      @typing="getFilteredTags"
+      @typing="debouncedGetFilteredTags"
       :id="id"
       dir="auto"
     >
@@ -33,6 +33,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
 import { FILTER_TAGS } from "@/graphql/tags";
+import debounce from "lodash/debounce";
 
 @Component({
   apollo: {
@@ -63,6 +64,12 @@ export default class TagInput extends Vue {
     return `tag-input-${TagInput.componentId}`;
   }
 
+  data(): Record<string, unknown> {
+    return {
+      debouncedGetFilteredTags: debounce(this.getFilteredTags, 200),
+    };
+  }
+
   async getFilteredTags(text: string): Promise<void> {
     this.text = text;
     await this.$apollo.queries.tags.refetch();