hide results on outside click

package.json

@@ -27,6 +27,7 @@
     "popper.js": "^1.14.7",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
+    "v-click-outside": "^2.1.1",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-compose": "^0.7.1",

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>

src/main.js

@@ -22,6 +22,7 @@ import pushNotifications from './lib/push_notifications_plugin.js'
 import messages from './i18n/messages.js'
 
 import VueChatScroll from 'vue-chat-scroll'
+import VueClickOutside from 'v-click-outside'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
 })
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
+Vue.use(VueClickOutside)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

yarn.lock

@@ -6389,6 +6389,10 @@ uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
 
+v-click-outside@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.1.tgz#5af80b68a1c82eac89c597890434fa3994b42ed1"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"