removed vue-click-outside

package.json

@@ -42,7 +42,6 @@
     "vee-validate": "3.2.4",
     "vue": "2.7.14",
     "vue-awesome": "4.0.2",
-    "vue-click-outside": "1.0.7",
     "vue-flatpickr-component": "8.1.5",
     "vue-gtag": "1.1.2",
     "vue-i18n": "8.15.3",

src/components/Autocomplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="search-bar" v-ClickOutside="hideSuggestions">
+  <section class="search-bar" ref="autocomplete">
     <div class="input-group">
       <b-form-input
         :class="`search-input ${showSuggestions ? 'has-suggestions' : ''}`"
@@ -12,6 +12,7 @@
       />
       <div class="input-group-append">
         <button type="button" class="btn btn-outline-primary"
+          ref="searchButton"
           :title="$tc('placeholder.search', filterCount)"
           @click="submit({ type: 'string', q })"
         >
@@ -105,12 +106,13 @@
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside'
+import { ref } from 'vue'
 import { mapStores } from 'pinia'
 import FilterFactory from '@/models/FilterFactory'
 import { useAutocompleteStore } from '@/stores/autocomplete'
 import { useUserStore } from '@/stores/user'
 import Explorer from './Explorer'
+import { useClickOutside } from '@/composables/useClickOutside'
 
 const AVAILABLE_TYPES = ['mention', 'newspaper', 'topic', 'location', 'person', 'collection']
 
@@ -151,6 +153,15 @@ export default {
       default: () => [],
     },
   },
+  beforeMount() {
+    const autocomplete = ref(this.$refs.autocomplete)
+    const button = ref(this.$refs.searchButton)
+    useClickOutside(
+      autocomplete,
+      () => this.hideSuggestions(),
+      button,
+    )
+  },
   computed: {
     ...mapStores(useAutocompleteStore, useUserStore),
     user() {
@@ -376,9 +387,6 @@ export default {
   components: {
     Explorer,
   },
-  directives: {
-    ClickOutside,
-  },
 }
 </script>