Native rendering of emojis with buttons on Chrome

[scottwarren]

Some emojis that are rendered, render with the individual emojis that they're made up on (for example, the pirate flag, is a black flag, and a skull and crossbones).

Some examples:

Possible duplicate of #418

I suspect that this is an issue with Chrome (but I thought I'd raise it here just in case) when rendering emojis inside a button (as mentioned here)

I've created a working example of this bug here:

https://github.com/scottwarren/emojipickerbug

which is hosted here:

https://emoji-picker-bug.netlify.app/

Edit: added example showing that this is a Chrome issue: https://codepen.io/scottwarren/pen/oNjppxV

Raised Chrome bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1078327

[scottwarren]

Chrome Windows rendering:

Safari Mac OS:

[scottwarren]

There are a couple of "working solutions" that I've found to work:

omit native prop, which means that the user won't see the emojis rendered natively (please correct me if I'm wrong with how this works :D)

or disable the usage of buttons when rendering the emojis useButton={false}

[scottwarren]

Thanks to @EtienneLem for pointing me in the right direction about the Chrome issue (https://github.com/missive/emoji-mart/issues/418#issuecomment-604445327).

Closing this as I think this is a Chrome bug, but I wanted to document it here for other people experiencing the same issue

[scottwarren]

Producing the effect without using EmojiMart to demonstrate the Chrome bug:

https://codepen.io/scottwarren/pen/oNjppxV

[scottwarren]

Raised Chrome bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1078327