Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Distinquishing enter key when selecting autocomplete emoji or really submiting input form #442

Open
imsys opened this issue Nov 17, 2021 · 0 comments

Comments

@imsys
Copy link

imsys commented Nov 17, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants