flag covers whole screen on firefox

[Freundschaft]

works fine on chrome but on firefox the flag covers the entire screen and is way too big, anyone else see this issue on firefox?

[davext]

Same here

[davext]

Temporarily fixed it by adding

.MuiPhoneNumber-flagButton{
    max-width: 10px !important;
}

to my css file

[Freundschaft]

thanks, this should be fixed in a PR

[david-vendel]

Is this library maintained? Can we expect fix of this and other issue in some near future? :) (just asking to know, my release is in few months, because otherwise I will have to migrate)

[mckelveygreg]

I found that setting the width to min-content helped avoid hard coding any values and !important s

.MuiPhoneNumber-flagButton {
    width: min-content;
}

[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)