Rainbow flag being inserted as 🏳🌈

[sanmiguel2019]

There is an issue with rainbow flag. In the textarea it appears correctly but it's being saved as two emojis: 🏳🌈

I use emoji parser to display emojis in PCs: https://github.com/rodrigopolo/jqueryemoji/

and the result is similar - 2 images, a grey flag and a rainbow image. The same result in mobile phones where I don't use emoji parser.

[mervick]

jqueryemoji works wrong with Emojione icons, emojione parses 🏳🌈 as one icon. So you should use Emojione https://github.com/joypixels/emojione/blob/master/lib/js/emojione.min.js

[sanmiguel2019]

But in Android phones the same problem - 2 icons. I don't use any parser to display icons in Android.

[mervick]

It's emojione feature. For display it properly you should use emojione parser. You can remove icons like this from emojionearea by changing filters option https://github.com/mervick/emojionearea#filters

[sanmiguel2019]

I want to keep the rainbow flag that's why I report this issue. I downloaded https://github.com/joypixels/emojione/blob/master/lib/js/emojione.min.js as you suggested.

$(".emojidiv").each(function() {
        var original = $(this).html();
        var converted = emojione.toImage(original);
        $(this).html(converted);
    });

The result - 2 icons - flag and rainbow. What I am doing wrong?

If I use emojione to parse emojies in ajax loaded content, the rainbow flag is not being parsed at all:

$.ajax({
type: "POST",
url: "/send.php",
data:sdata,
cache: false
})

.done(function(data) {
...
var datar = emojione.toImage(data);
...
}

[mervick]

It looks like emojione bug.

[sanmiguel2019]

Understanding that there will be no solution for this problem, I just wanted to remove the rainbow flag. But then I discovered that there many other emojis that have the same problem, for example,

function saveChat() {
...
var message = $("#msginput").data("emojioneArea").getText();
console.log(message);
...
}

In the console appears this as rainbow flag:

🏳🌈

If I copy paste and paste these symbols in: https://demos.joypixels.com/latest/phptoimage.php

I get the same result: 🏳🌈 instead of image:

Then I searched Google for "emoji rainbow flag", In the titles of the results also appear there 2 symbols but with a whitespace between them:

🏳️ 🌈

When I post them in: https://demos.joypixels.com/latest/phptoimage.php

I get a little bit different result as from the console (two png images instead of not being parsed at all):

When I open any of the pages from Google results, I don't see a black square + black rainbow symbols, but:

🏳️‍🌈

Posted 🏳️‍🌈 to https://demos.joypixels.com/latest/phptoimage.php and got the correct result:

So, why emojionearea produces

🏳🌈

instead of

🏳️‍🌈

that can be converted into an image?

As I wrote, I could just remove one emoji, but there are problems with other emojis as well and I would like to resolve this problem in some way.

[mervick]

I suppose it's an emojione bug and I can't fix it from emojionearea. Anyway I will check this bug and in next major version I will create version of emojionearea without dependency to emojione.

[caseyahenson]

@sanmiguel2019 the discrepancy here seems to be in regards to the makeup of the code point sequence of the rainbow flag.

The fully-qualified code point sequence of the rainbow flag is: White Flag (U+1F3F3) | VS16 (U+FE0F) | ZWJ (U+200D) | Rainbow (U+1F308) 🏳️‍🌈

In your examples above, the instances that do not convert into one rainbow flag image are not fully-qualified and do not include the VS16 and ZWJ sequences, therefore systems should treat those as two individual emoji.

For testing purposes you should use an emoji copy/paste application that defaults to fully-qualified output like EmojiCopy. And you can investigate your sequences using a tool like https://www.branah.com/unicode-converter to see exactly what's going on behind the scenes.

Hope this helps!

[sanmiguel2019]

The problem was event.target.blur(); before function that process the form.

I had:

event.target.blur();
runChat(13);

but changing to:

runChat(13);
event.target.blur();

solved the problem.

However, now I have another problem. I added a button to the form so make possible to submit it with "enter" and with button.

<button id="sendbutton"><img class="send" src="/sendmessage.png" alt=""></button>

This (form submitting with "enter") works perfectly and emojis are not displayed correctly, not as two symbols:

$("#msginput").emojioneArea({
useInternalCDN:false,
pickerPosition:"top",
autocomplete: false,
events:{
emojibtn_click:function(button,event){this.hidePicker();},
keyup:function(){updateTyping();},
keypress: function(editor,event) {
if (event.which == 13 && !event.shiftKey && senter == '1') {
event.preventDefault();
runChat(13);
event.target.blur();
return false;
} else {
return false;
}}}
});

But submitting form with this code (with button) produces two images from rainbow flag and some other emojis:

$("#sendbutton").click(function(){
event.preventDefault();
runChat(13);
event.target.blur();
return false;
});

I tried it with pure javascript:

document.getElementById('sendbutton').onclick = function()

I tried it with jquery in different variations

$(document).on('click',"#sendbutton",function()

The same result - 2 symbols.

At the same time the code below submits emojis correctly but the form is submitted automatically, after selecting an emoji and without pressing the button:

$(document).on("#sendb").click(function()

If this submits form correctly, why all other variants creates 2 symbols?

I don't understand where is the problem. Any ideas?

[mervick]

@sanmiguel2019 it a problem in emojione library with some emojis

[sanmiguel2019]

But it's the same form what I am submitting. The only difference is that submitting with "Enter" works fine but submitting with button produces 2 symbols.

[sanmiguel2019]

If pressing "enter" submits emojis correctly, is there a way how to simulate keypress event? This does not work:

$(document).on('click', '#sendbutton', function(){
$("#msginput").trigger({
type:"keypress", 
which:13, 
keyCode:13});
});