`noCountryFlags: false` does still hide country flag emojis on windows, even though my custom font supports them

[Simon-Laux]

noCountryFlags: false does still hide flag emojis on ms windows with the native emoji set. I replace the native emoji font inside of my css, with google noto color emoji which does support country flags:

@font-face {
  font-family: 'EmojiMart';
  src: local('Apple Color Emoji'), url("noto/emoji/NotoColorEmoji.ttf") format("truetype");
}

But emoji mart checks only for the native font and does not notice that the 'EmojiMart' font was set:

https://github.com/missive/emoji-mart/blob/d29728f7b4e295e46f9b64aa80335aa4a3c15b8e/packages/emoji-mart/src/helpers/native-support.ts#L64

Possible Solutions

A. noCountryFlags property should respect false

noCountryFlags should autodetect when it is set to undefined and respect my preference when I set it to a boolean true or false:

noCountryFlags = undefined // auto detect support
noCountryFlags = false // show country flags
noCountryFlags = true  // hide country flags

PR that implements this solution: #809

B. isEmojiSupported() check should include 'EmojiMart' font

probably easy to do (just add it to native-support.ts#L64), but there is the question whether this introduces a race condition where the css stylesheet is loaded after emoji mart did the check.

[Tokirkhokhar]

you can refer this repo if you are getting issue with country flags on windows. https://github.com/talkjs/country-flag-emoji-polyfill

[Simon-Laux]

you can refer this repo if you are getting issue with country flags on windows. https://github.com/talkjs/country-flag-emoji-polyfill

not sure how this would help, this injects a custom font (same as I do in my project), but emoji mart tests for flag support with 2 specific system fonts on a canvas, the injected font will not be part of that.