Emoji not always inserted at the correct position

[PVince81]

Steps to reproduce

1. Enter a chat room
2. Type some text "abcdef"
3. Set the cursor behind "c"
4. Pick an emoji from the picker
5. Repeat with "b", "a" and other letters

Expected behaviour

Emoji always inserted at the cursor's position

Actual behaviour

Often times the emoji is inserted at the end of the field.

Talk app

git master 4e290c0105d99aa0435f8db7ff37f06065e398b1 (10.0.0)

Browser

Chromium 85.0.4183.102

I see in NewMessageForm.vue that there's some gymnastics required to insert emojis, so I suspect that not all the cases are covered. It is also possible that sometimes the browser's internal selection/range is lost when clicking outside.

[danxuliu]

Also see https://github.com/nextcloud/spreed/pull/3943#issuecomment-665792081

[PVince81]

found this: it seems that a new div gets created sometimes when inserting an emoji:

[PVince81]

would be nice if we could just get rid of all those divs... it's already a real pain here with newlines https://github.com/nextcloud/spreed/pull/4259#issuecomment-704999577

interestingly, pasting text that contains newlines will insert true newlines, no "br" nor "div"

[ShGKme]

• [ ] Emoji should be inserted in the last caret position, if any. Otherwise - in the end
• [ ] Emoji should replace the last selected
• [ ] If the last character is a new line \n, an emoji should be added to the last line
• [ ] Focus should return to the last caret position after inserted emoji once the picker is closed

The current solution doesn't work because the message input's focus and selection are lost after clicking NcEmojiPicker. Also, it expects a new line to be added by <br>, while it is \n

[nickvergessen]

Now a bug of the vue library, right?

[ShGKme]

Now a bug of the vue library, right?

It is not. Vue library implements only emoji picker in text.

But we also have a button with additional NcEmojiPicker in Talk.

So I can see 3 options here:

1. Remove NcEmojiPicker in Talk and always use : emoji picker
2. Fix the problem
3. Fix the problem and add this additional picker for the vue lib