diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/user_autosuggest/user_autosuggest.js | 14 | ||||
| -rw-r--r-- | src/components/user_autosuggest/user_autosuggest.vue | 4 | ||||
| -rw-r--r-- | src/main.js | 2 | ||||
| -rw-r--r-- | yarn.lock | 4 |
5 files changed, 21 insertions, 4 deletions
diff --git a/package.json b/package.json index c80e0f63..14937673 100644 --- a/package.json +++ b/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", diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js index eff6ef75..b99f61cc 100644 --- a/src/components/user_autosuggest/user_autosuggest.js +++ b/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 } } } diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue index 743d9eaf..eb5aa41b 100644 --- a/src/components/user_autosuggest/user_autosuggest.vue +++ b/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> diff --git a/src/main.js b/src/main.js index c80aea36..725f5806 100644 --- a/src/main.js +++ b/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 @@ -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" |