#101 - update caret pos after emoji's inserted

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()
+        }
+      }
     }
   }
 }

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"

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;