DCzajkowski / vue-emoji-picker

Very simple, yet powerful, vue emoji picker 🎉🔥🚀
MIT License
331 stars 49 forks source link

Insert method doesn't know where we left our cursor #11

Closed Epistol closed 5 years ago

Epistol commented 5 years ago

The method :

insert(emoji) {
      this.input += emoji
    },

is mostly wrong due to the fact that when we put back the cursor on the end of the input, it will continue to add emojis at the end of the text, and not where we position our cursor.

DCzajkowski commented 5 years ago

This is why this method is on the client side, not baked into the package. If you want to write the logic that handles inserting at the cursor position, go ahead 😉

Epistol commented 5 years ago

For the record, I came up with this method :

append(emoji) {
                const textArea = document.getElementsByName(this.label + '-emoji')[0];
                this.cursorPosition = textArea.selectionEnd;
                const start = this.input.substring(0, textArea.selectionStart);
                const end = this.input.substring(textArea.selectionStart);
                this.input = start + emoji + end;
                textArea.focus();
                this.$nextTick(() => {
                    textArea.selectionEnd = this.cursorPosition + emoji.length
                })
            },

Don't mind the getElementsByName, it's temporary, but it's a good start to get your input.