hide results on outside click

src/components/user_autosuggest/user_autosuggest.js

@@ -11,7 +11,8 @@ export default {
     return {
       query: '',
       results: [],
-      timeout: null
+      timeout: null,
+      resultsVisible: false
     }
   },
   watch: {
@@ -26,9 +27,18 @@ export default {
         this.results = []
         if (query) {
           userSearchApi.search({query, store: this.$store})
-            .then((data) => { this.results = data })
+            .then((data) => {
+              this.results = data
+              this.resultsVisible = true
+            })
         }
       }, debounceMilliseconds)
+    },
+    onInputClick () {
+      this.resultsVisible = true
+    },
+    onClickOutside () {
+      this.resultsVisible = false
     }
   }
 }

src/components/user_autosuggest/user_autosuggest.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="user-autosuggest">
     <input v-model="query" placeholder="Search..." />
-    <div class="user-autosuggest-results">
+  <div class="user-autosuggest" v-click-outside="onClickOutside">
+    <div class="user-autosuggest-results" v-if="resultsVisible">
       <BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
     </div>
   </div>