Emoji is getting added before the contenteditable instead of inside it

[renebrain]

Again, a "sometimes" issue i have faced with the tool. Sometimes when a Emoji is added via the selection menu, it is getting added before the contenteditable inside of the container which is created by the tool. I don't know if there is something going wrong inside of the tool and appends the emoji to the wrong container.

[mervick]

It's very strange, Where was a position of caret when you added emoji? It was at begin of contentedtable? How to reproduce this issue?

[renebrain]

The caret is actually on no position when i am adding the emoji. I directly click on the emojimenu button. I added a gif with the behaviour. The first 3 emojis are added without clicking into the textarea. the next 3 ones are added after i clicked inside of it. Also in this demo you can see that the behaviour from the other issue i have posted #51. My context menu is not showing me the paste options and is not pasting over keyboard as well.

[mervick]

Thanks for the detailed answer. Can you reproduce issue with pasting on this page https://jsfiddle.net/1v03Lqnu/12/

[renebrain]

No i can't. We have an assumption over here: We are using CKEditor in our project as well. And since we are using emojionearea, ckeditor is going nuts sometimes aswell. When pasting stops working on the emojionearea, in ckeditor a paste triggers 5 times in a row (only on firefox). I also got once a strange behaviour that i can't reproduce anymore, but the following happened. I tried to programmatically focus into the emojionearea and when i did that, the contenteditable showed me the ckeditor controls inside of it. We think that emojionearea and ckeditor might use some of the same variables/functions in the global scope, which messes up both of them. But i don't have any evidence to prove that except from our user experience.

I hope this might help you :)

[Kuan93]

Hi there. I am facing the same issue and is able to reproduce the issue on https://jsfiddle.net/1v03Lqnu/12/

Then I found out that it happens with FireFox, but Chrome is fine.

To reproduce:

1. remove the default content
2. click outside the div to leave it unfocused
3. click multiple times instantly on the lower part of the div
4. the caret will move out of the div box
5. insert the emoji and you would see this issue

Thank you.

[mervick]

@Kuan93 can you say your OS and version of your firefox? I can't reproduce it on linux with firefox 49.0

[Kuan93]

I hope these help. =)

[renebrain]

This issue is from our side confirmed fixed with the newer releases of emojionearea. You can close this issue.

[lacerdev]

I had this same issue with firefox, when the caret was wrongly positioned. For some reason when I click on picker button, the caret stays there (outside emojione-editor class element) , and in these cases occurs the problem. The images are been appended in the element with class="emojionearea" and not the emojionearea-editor.

Firefox version: 51.0.1 (32-bit) emojionearea version: 3.1.5

It follows the image with example:

[lacerdev]

After some researches I have found these links:

https://stackoverflow.com/questions/21986985/firefox-sets-wrong-caret-position-contenteditable-on-focus https://stackoverflow.com/questions/1987435/contenteditable-cursor-position-style-in-firefox https://bugzilla.mozilla.org/show_bug.cgi?id=550434 https://bugzilla.mozilla.org/show_bug.cgi?id=904846

I Hope it helps.