search

alexplumb / material-ui-phone-number

Fork of react-phone-input-2 for the Material-UI library
MIT License
121 stars 180 forks source link

flag not visible in Safari #111

Open justdvl opened 2 years ago

justdvl commented 2 years ago

Country flag is not visible in Safari

Screenshot 2021-11-08 at 10 56 48
isaacwuerth commented 2 years ago

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

n8sabes commented 2 years ago

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

justdvl commented 2 years ago

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 commented 2 years ago

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

JadeJDoucet commented 2 years ago

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

yasincelebi commented 2 years ago

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

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