Emoji Added to Hidden Input NOT to emojionearea-editor

[sfraise]

This was working fine but now the emoji image is being added to the hidden input that emojionearea is bound to instead of to the visible emojionearea-editor.

No errors, nothing seems wrong or out of place, it just adds it to the wrong place.

Any idea why?

[mervick]

Hi, can you create an example at jsfiddle? My thoughts it's a result of custom css

[sfraise]

I don't think a jsfiddle would work for replicating this, too many variables and moving parts.

I've removed all custom css for it and removed setting while binding and just flat out did a simple .emojioneArea() and still the same issue.

I've tried both inline true and false, I've tried using a text input, textarea, hidden input, etc and nothing seems to matter.

I do build the html with the input dynamically from js and append it to the dom but it's no different than what I was doing where it still works.

• I have noticed that the carot leaves the input when I click an emoji in the version that no longer works compared to the version that does where the cursor never leaves the input. I kind of feel like this is a pretty good clue.

At this point I'm sure it's something we've done somewhere but there's sooooo many changes including element naming structures since the last time we actually tested this before realizing something was wrong it's going to take some time to pinpoint what's causing it.

Was kind of hoping someone else has ran into this issue and would help direct me closer to where the issue could be without reverting to a couple of months ago and trying to slowly add all of the changes back in one by one.

What throws me is I have no idea "how" emojionearea is actually adding the emoji image into the element. I assume via js doing some sort of "this.parent.find or this.next something or other" but maybe I'm way off.

Oh well, I'll figure it out I'm sure, only question is how much time it's going to take.

[sfraise]

This is a screen shot of what it does from the console.

[sfraise]

// BIND EMOJIS TO MAIN INPUT (& SEND NEW MESSAGE) const emojiInput = jQuery('#bbmMessengerMessageInput').emojioneArea({ inline: false, shortcuts: false, search: false, searchPlaceholder: false, tones: false, events: { emojibtn_click: function (button, event) { // REMOVE EMOJI PICKER //jQuery('#bbmMessengerEmojioneContainer').fadeOut(); //jQuery('#bbmMessengerWrapper').trigger('click'); }, keyup: function (editor, event) { if (event.shiftKey && event.which === 13) { event.preventDefault(); } else if(event.keyCode === 13) { //CREATE MESSAGE ON ENTER jQuery('#bbmMessengerSubmit').trigger( "click" ); } } } }); const emojiInputArea = emojiInput[0].emojioneArea;

And here's how I'm binding but again, doesn't matter if I just change that to the most simple way to bind it still does it.

[mervick]

Maybe you call jQuery('#bbmMessengerMessageInput').emojioneArea(...) twice somehow

[sfraise]

Well that was the first thing I though, searched all files in my IDE and no go.

[mervick]

Sorry, cant help you without viewing the code. Judging by the fact that you are performing some manipulations with the picker, it is easier for you to make changes directly to the plugin code.

[sfraise]

I finally figured out the issue.

I had to defer the emojionearea script so it loaded after other stuff. Guessing there was a conflict with the actual emojionearea script BuddyBoss itself uses.