can't select "hand with fingers splayed" emoji in any skin colour other than Neutral

[arjita-mitra]

I have found a bug with a particular emoji- "hand with fingers splayed". I have tested it in your live demo too and the issue is present there.

As you can see in the screenshot I have hovered and tried to select the hand with fingers splayed emoji but its not getting selected and the emoji details in the modal footer is also wrong its the default emoji I guess. I tried to log the emojidata to see whats wrong, surprisingly the click event is not even triggered so nothing got logged inside the onClick handler. Last thing I verified is this emoji object is present in the emoji.json file like every other emojis.

In the screenshot below I have the same emoji hovered but in neutral skin tone, this is working.

Please fix this issue as its a major bug and we are using this in production.

[ealush]

This is very peculiar. Thank you for reporting this, @arjita-mitra. Can confirm I am seeing this behavior on my end too. I'll have to dig into it.

[ealush]

OK. this is indeed weird. Wound the reason, and the reason is that the emoji is non-standard, as in - unlike most (but not all!) hand emojis, it does not have a "neutral" skin tone in the specification, and as such, its unified code is different between the neutral mode and the rest.

I'll have to see what to do about that. Might take a few days to sort out.

Source:
https://www.emojiall.com/en/emoji/%F0%9F%96%90

🔸 🖐 (1F590) There is no Emoji version of this Unicode character, which means that on most mobile phones or computer systems, the character can only be displayed in black and white character style, but in a few good compatibility platforms, it can still display color picture style. The Unicode organization does not yet recommend its use as a universal emoji symbol.

[arjita-mitra]

thank you for debugging this. I will be waiting for the fix :-)

[ealush]

@arjita-mitra I think this is now solved in emoji-picker-react@4.5.7, please let me know if that works for you as well.

[arjita-mitra]

Thank you so much for fixing this so quickly. Really appreciate this :-)

I have verified that the emoji can be selected and hovered correctly now, only issue is that I am not getting the correct unicode skin modifier combination. For example-

{ "n": [ "hand with fingers splayed", "raised hand with fingers splayed" ], "u": "1f590-fe0f", "v": [ "1f590-1f3fb", "1f590-1f3fc", "1f590-1f3fd", "1f590-1f3fe", "1f590-1f3ff" ], "a": "0.7" }

As you can see the emoji object property "v" doesn't contain the full unicode "1f590-fe0f-1f3fb" instead "1f590-1f3fb".

so far all the "v" property has the complete unicode given in "u" property + the skin tone modifier so the following code to extract the emoji title always worked for me. I store all the emojis by their unicode comes as part of "u" prop then I check for skin tome modifiers in the unicode and remove them if required and extract the title based on the unicode without skintone modifiers. Since this emoji is missing fe0f part of the unicode so the title is not getting extracted correctly. I couldn't reproduce it for any other emoji so far. Let me know you can do anything about this.

export const getEmojiTitleFromEmojiUnicode = (emojiUnicode: string): string => {
  if (emojiDictionary.has(emojiUnicode)) {
    return emojiDictionary.get(emojiUnicode)!;
  }

  const unicodeWithoutSkinModifier = removeSkinToneModifiers(emojiUnicode);

  return emojiDictionary.get(unicodeWithoutSkinModifier) || '';
};

// Function to get the emoji without skintone modifiers
const removeSkinToneModifiers = (emojiUnicode: string): string => {
  const skinToneModifiers = new Set(['1f3fd', '1f3fe', '1f3ff', '1f3fc', '1f3fb']);
  if (!emojiUnicode) {
    return '';
  }
  const emojiUnicodeSplitted = emojiUnicode.split('-');
  const unicodeWithoutSkinModifier = emojiUnicodeSplitted.filter(part => !skinToneModifiers.has(part));

  return unicodeWithoutSkinModifier.join('-');
};