Sitelet https://web.archive.org/web/20210809075419/https://github.com/mui-org/material-ui/issues/27525
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

country flag emoji dose dose not work on firefox in autocomplete drawer #27525

Open
m365i opened this issue Jul 30, 2021 · 3 comments
Open

country flag emoji dose dose not work on firefox in autocomplete drawer #27525

m365i opened this issue Jul 30, 2021 · 3 comments

Comments

@m365i
Copy link

@m365i m365i commented Jul 30, 2021

see country selector here in firefox from the example in the documentation:
https://material-ui.com/components/autocomplete/#country-select

in chrome there is no support for country flags emoji so its not relevant there.

if found out the issue is duo to letter-spacing style property in the component .MuiAutocomplete-paper and in the body.
you can solve the issue by setting the letter-spacing for the .MuiAutocomplete-paper component to "0px"
for example to test this you can run this command in the console and then click to open the drawer and wait for the flags to appear in 3 seconds:

setTimeout(() => {
  document.querySelectorAll(".MuiAutocomplete-paper").forEach(e => e.style.letterSpacing = "0px")
}, 3000)

one solution that i found is just putting the emoji icon in a component with style property letter-spacing set to 0:

<span style={{ letterSpacing: "0px" }}>🇮🇱</span>
@eps1lon
Copy link
Member

@eps1lon eps1lon commented Aug 2, 2021

Thanks for the feedback.

I can't find any difference between Firefox and Chrome in https://material-ui.com/components/autocomplete/#country-select:

Screenshot from 2021-08-02 11-31-24

Could you be more specific what the issue is in firefox? In the future please use the issue template since it already includes these questions.

@m365i
Copy link
Author

@m365i m365i commented Aug 3, 2021

from locking around, this thread https://stackoverflow.com/a/54520964 suggest that it might only be a windows specific problem.
this is what i see
image
and after changing

<span>{countryToFlag(option.code)}</span>

to

<span style={{ letterSpacing: "0px" }}>{countryToFlag(option.code)}</span>

image

@eps1lon
Copy link
Member

@eps1lon eps1lon commented Aug 9, 2021

Reading through https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering/54520964 it sounds like we should be using actual images instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants