fix all known problems with clicks on autocomplete emojis

2 files changed, 15 insertions, 7 deletions

diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index 0955a37e..f81669b9 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -59,7 +59,8 @@ const EmojiInput = {
       input: undefined,
       highlighted: 0,
       caret: 0,
-      focused: false
+      focused: false,
+      blurTimeout: false,
     }
   },
   computed: {
@@ -122,12 +123,12 @@ const EmojiInput = {
       this.$emit('input', newValue)
       this.caret = 0
     },
-    replaceText (e) {
+    replaceText (e, suggestion) {
       const len = this.suggestions.length || 0
       if (this.textAtCaret.length === 1) { return }
-      if (len > 0) {
-        const suggestion = this.suggestions[this.highlighted]
-        const replacement = suggestion.replacement
+      if (len > 0 || suggestion) {
+        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
+        const replacement = chosenSuggestion.replacement
         const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
         this.$emit('input', newValue)
         this.highlighted = 0
@@ -173,13 +174,20 @@ const EmojiInput = {
     onBlur (e) {
       // Clicking on any suggestion removes focus from autocomplete,
       // preventing click handler ever executing.
-      setTimeout(() => {
+      this.blurTimeout = setTimeout(() => {
         this.focused = false
         this.setCaret(e)
         this.resize()
       }, 200)
     },
+    onClick (e, suggestion) {
+      this.replaceText(e, suggestion)
+    },
     onFocus (e) {
+      if (this.blurTimeout) {
+        clearTimeout(this.blurTimeout)
+      }
+
       this.focused = true
       this.setCaret(e)
       this.resize()
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
index 8437a495..12d7d8a7 100644
--- a/src/components/emoji-input/emoji-input.vue
+++ b/src/components/emoji-input/emoji-input.vue
@@ -6,7 +6,7 @@
       <div
         v-for="(suggestion, index) in suggestions"
         :key="index"
-        @click.stop.prevent="replaceText"
+        @click.stop.prevent="(e) => onClick(e, suggestion)"
         class="autocomplete-item"
         :class="{ highlighted: suggestion.highlighted }"
         >