mervick/emojionearea

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:

imsys@de7302c

@@ -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