fix(front): fix TagInput display

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Event/TagInput.vue

@@ -1,15 +1,17 @@
 <template>
-  <o-field :label-for="id">
+  <o-field :label-for="id" class="taginput-field">
     <template #label>
-      {{ $t("Add some tags") }}
-      <o-tooltip
-        variant="dark"
-        :label="
-          $t('You can add tags by hitting the Enter key or by adding a comma')
-        "
-      >
-        <HelpCircleOutline :size="16" />
-      </o-tooltip>
+      <p class="inline-flex items-center gap-0.5">
+        {{ t("Add some tags") }}
+        <o-tooltip
+          variant="dark"
+          :label="
+            t('You can add tags by hitting the Enter key or by adding a comma')
+          "
+        >
+          <HelpCircleOutline :size="16" />
+        </o-tooltip>
+      </p>
     </template>
     <o-taginput
       v-model="tagsStrings"
@@ -20,8 +22,8 @@
       icon="label"
       :maxlength="20"
       :maxitems="10"
-      :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-      @input="debouncedGetFilteredTags"
+      :placeholder="t('Eg: Stockholm, Dance, Chess…')"
+      @input="getFilteredTags"
       :id="id"
       dir="auto"
     >
@@ -31,11 +33,11 @@
 <script lang="ts" setup>
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
-import debounce from "lodash/debounce";
 import { computed, onBeforeMount, ref } from "vue";
 import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
 import { useFetchTags } from "@/composition/apollo/tags";
 import { FILTER_TAGS } from "@/graphql/tags";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   modelValue: ITag[];
@@ -47,6 +49,8 @@ const text = ref("");
 
 const tags = ref<ITag[]>([]);
 
+const { t } = useI18n({ useScope: "global" });
+
 let componentId = 0;
 
 onBeforeMount(() => {
@@ -61,14 +65,16 @@ const { load: fetchTags } = useFetchTags();
 
 const getFilteredTags = async (newText: string): Promise<void> => {
   text.value = newText;
-  const res = await fetchTags(FILTER_TAGS, { filter: newText });
+  const res = await fetchTags(
+    FILTER_TAGS,
+    { filter: newText },
+    { debounce: 200 }
+  );
   if (res) {
     tags.value = res.tags;
   }
 };
 
-const debouncedGetFilteredTags = debounce(getFilteredTags, 200);
-
 const filteredTags = computed((): ITag[] => {
   return differenceBy(tags.value, props.modelValue, "id").filter(
     (option) =>
@@ -95,3 +101,8 @@ const tagsStrings = computed({
   },
 });
 </script>
+<style lang="scss" scoped>
+:deep(.o-input__wrapper) {
+  display: initial;
+}
+</style>