From 820a6543c7dc4e99d2a193c5ce05cc0c9453a8d8 Mon Sep 17 00:00:00 2001
From: jared <jaredrmain@gmail.com>
Date: Mon, 8 Apr 2019 11:10:26 -0400
Subject: [PATCH] #101 - update caret pos after emoji's inserted

---
 src/components/emoji-input/emoji-input.js     | 19 +++++++++++++++++++
 src/components/emoji-input/emoji-input.vue    |  1 +
 .../emoji-selector/emoji-selector.vue         |  3 ++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
index 8f7598ca..99dba1cb 100644
--- a/src/components/emoji-input/emoji-input.js
+++ b/src/components/emoji-input/emoji-input.js
@@ -110,6 +110,25 @@ const EmojiInput = {
       const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
       this.$refs.input.focus()
       this.$emit('input', newValue)
+      this.caret += emoji.length
+      setTimeout(() => {
+        this.updateCaretPos()
+      })
+    },
+    updateCaretPos () {
+      const elem = this.$refs.input
+      if (elem.createTextRange) {
+        const range = elem.createTextRange()
+        range.move('character', this.caret)
+        range.select()
+      } else {
+        if (elem.selectionStart) {
+          elem.focus()
+          elem.setSelectionRange(this.caret, this.caret)
+        } else {
+          elem.focus()
+        }
+      }
     }
   }
 }
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
index 151861de..26d7c32a 100644
--- a/src/components/emoji-input/emoji-input.vue
+++ b/src/components/emoji-input/emoji-input.vue
@@ -6,6 +6,7 @@
       :type="type"
       :value="value"
       :placeholder="placeholder"
+      id="good"
       @input="onInput"
       @click="setCaret"
       @keyup="setCaret"
diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue
index ddab2659..d5d63543 100644
--- a/src/components/emoji-selector/emoji-selector.vue
+++ b/src/components/emoji-selector/emoji-selector.vue
@@ -42,7 +42,7 @@
   &-dropdown {
     position: absolute;
     right: 0;
-    top: 100%;
+    top: 28px;
     z-index: 1;
 
     &-toggle {
@@ -50,6 +50,7 @@
       position: absolute;
       top: -25px;
       right: 2px;
+      line-height: 1;
 
       i {
         font-size: 18px;