#101 - update caret pos after emoji's inserted

This commit is contained in:
jared 2019-04-08 11:10:26 -04:00
parent b4e53576f2
commit 820a6543c7
3 changed files with 22 additions and 1 deletions

View file

@ -110,6 +110,25 @@ const EmojiInput = {
const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret) const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret)
this.$refs.input.focus() this.$refs.input.focus()
this.$emit('input', newValue) 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()
}
}
} }
} }
} }

View file

@ -6,6 +6,7 @@
:type="type" :type="type"
:value="value" :value="value"
:placeholder="placeholder" :placeholder="placeholder"
id="good"
@input="onInput" @input="onInput"
@click="setCaret" @click="setCaret"
@keyup="setCaret" @keyup="setCaret"

View file

@ -42,7 +42,7 @@
&-dropdown { &-dropdown {
position: absolute; position: absolute;
right: 0; right: 0;
top: 100%; top: 28px;
z-index: 1; z-index: 1;
&-toggle { &-toggle {
@ -50,6 +50,7 @@
position: absolute; position: absolute;
top: -25px; top: -25px;
right: 2px; right: 2px;
line-height: 1;
i { i {
font-size: 18px; font-size: 18px;