From 5f4a8dcc05a0790d5ef17d3a2df3a65d260641ee Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Jun 2019 21:24:10 +0300
Subject: [PATCH] properly position the caret after replacement

---
 src/components/emoji-input/emoji-input.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index c425fdf525..b79d11cafb 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -130,10 +130,16 @@ const EmojiInput = {
         const replacement = suggestion.replacement
         const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
         this.$emit('input', newValue)
-        this.caret = 0
         this.highlighted = 0
-        // Re-focus inputbox after clicking suggestion
-        this.input.elm.focus()
+        const position = this.wordAtCaret.start + replacement.length
+
+        this.$nextTick(function () {
+          // Re-focus inputbox after clicking suggestion
+          this.input.elm.focus()
+          // Set selection right after the replacement instead of the very end
+          this.input.elm.setSelectionRange(position, position)
+          this.caret = position
+        })
         e.preventDefault()
       }
     },