flag not visible in Safari

[david-vendel]

Country flag is not visible in Safari

[isaacwuerth]

I have the same problem with Chrome, Inspect Browser and Safari on iphone(iOS v15.0.1, iPhone 13 Pro).

[n8sabes]

I am having this issue on iPhone as well (both Safari and Chrome).

[david-vendel]

Hello all, I forked this library, fix Firefox and Safari bug (and plan to fix other issues and rewrite to fn component) and published it to npm as material-ui-phone-number-2

https://github.com/justdvl/material-ui-phone-number-2
https://www.npmjs.com/package/material-ui-phone-number-2

I recommend everyone who needs to use this library, but working version, to make a simple switch. I will also actively maintain this version 2 library.

[viclafouch]

Or another library : https://www.npmjs.com/package/mui-tel-input (with phone validation available) React 17/18 supported with MUI V5

[JadeJDoucet]

For me the fix was finding where the SVG was rendered, and adding overflow: visible and then setting the height on the svg.

[yasincelebi]

<MuiPhoneNumber {...props} sx={{ '& svg': { height: '1em', }, }}

i added above sx prop to MuiPhoneNumber component and it is resolved.