emojionearea Adding emoji from search places it at beginning of field

Reproducible here: https://jsfiddle.net/mervick/1v03Lqnu/765/

Just select one of the fields and type something, then open emoji picker, search for an emoji and add it. It ends up being placed at beginning of the field

Feb 15 '19 10:02 johnsenpeder

I fixed this with:

$(document).on('focus', 'textarea.emoji', function() {
	//set that the textarea was focused. Mainly just in case trying to insert emoji at 0
	$(this).attr('data-focused', 'true');
});
$(document).on('click', '.emojibtn', function() {
	//insert text at caret positions
	//https://stackoverflow.com/a/15977052
	var $txt = jQuery('textarea.emoji');
	var textAreaTxt = $txt.val();
	var caretPos = $txt[0].selectionStart;
	if (textAreaTxt.length > 0 && caretPos == 0 && $txt.attr('data-focused') != 'true') {
		caretPos = textAreaTxt.length;
	}
	var txtToAdd = $(this).attr('data-name');
	$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
});

This obviously is specific to a textarea which has a class of emoji (and is maybe slightly hacky), but it likely could be reworked to be more robust.

Feb 16 '19 16:02 HanPrower

@HanFox, it does not work, because before click on emoji button you change selection to search input so you can't get textarea selection

Feb 16 '19 21:02 mervick

The textarea is fetched via var $txt, so I'm not sure what you mean.

My way of doing it definitely does work as I use it on a forum I manage, but for you to get it to work easily for every scenario you might need to go at it a bit differently.

Feb 16 '19 21:02 HanPrower

If you input something in search field and after that click on emoji button you can't get textarea selection, because it was reset and selection will always from start. So your code definitely does not work

Feb 16 '19 22:02 mervick

For fix this need to save selection between blur event of contenteditable textarea and focus event of search input

Feb 16 '19 22:02 mervick

Oh, sorry, you're correct. I failed to realize the forum software has a way of saving the caret position in its JS (for use with its bbcode insertions, etc.).

Well, if you want to look at how other software does it, phpBB has a way ^.^;;

Feb 16 '19 22:02 HanPrower

Same issue, do you guys got fix?