Distinquishing enter key when selecting autocomplete emoji or really submiting input form
imsys opened this issue · 0 comments
imsys commented
This is similar to #29, but it also show a hackish way to solve it.
We can use event keyup to verify the moment to submit. But when we select an emoji in the autocomplete by pressing enter, that also triggers the keyup event, and I did not want to send the message at the emoji picking moment.
So I added a lock variable:
@@ -42,6 +42,7 @@ function($, emojione, blankImg, slice, css_class, emojioneSupportMode, invisible
self.emojiTemplateAlt = self.sprite ? '<i class="emojione-{uni}"/>' : '<img class="emojioneemoji" src="{img}" crossorigin/>';
self.emojiBtnTemplate = '<i class="emojibtn" role="button" data-name="{name}" title="{friendlyName}">' + self.emojiTemplateAlt + '</i>';
self.recentEmojis = options.recentEmojis && supportsLocalStorage();
+ self.autocomplete_enter_lock = false;
var pickerPosition = options.pickerPosition;
self.floatingPicker = pickerPosition === 'top' || pickerPosition === 'bottom';
@@ -560,6 +561,7 @@ function($, emojione, blankImg, slice, css_class, emojioneSupportMode, invisible
if (options.shortcuts) {
textcompleteOptions.onKeydown = function (e, commands) {
if (!e.ctrlKey && e.which == 13) {
+ self.autocomplete_enter_lock = true;
return commands.KEY_ENTER;
}
};
And used it like:
let emojiChat = jQuery("#chatinput").emojioneArea({
events:{
keyup: function (button, e) {
if (e.keyCode == 13 && !e.shiftKey) {
if (this.autocomplete_enter_lock){
this.autocomplete_enter_lock = false;
return;
}
let input_msg = this.getText().trim()
this.setText('')
if(input_msg){
addItem(input_msg)
}
}
}
}
});
If anyone wants to use it, here is the fork:
https://github.com/imsys/emojionearea/tree/autocomplete_enter_lock