Doesn't work with Firefox

[sedhha]

The country flag over spans into the entire page and doesn't let you do anything:

Here's a Screenshot for the reference:

Here's the minimum reproducible code and here's the sandbox.

UI Link <- Open this in firefox and it just messes up everything.

import MuiPhoneNumber from "material-ui-phone-number";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MuiPhoneNumber
        variant="outlined"
        name="phone"
        data-cy="user-phone"
        required
        label="Phone Number"
        size="small"
        defaultCountry={"in"}
      />
    </div>
  );
}

[Wojnr]

Can confirm. Temporary workaround fixes the issue:

<MuiPhoneNumber
  sx={{
    svg: {
      height: "20px",
    },
  }}
/>

[sedhha]

Can confirm. Temporary workaround fixes the issue:

<MuiPhoneNumber
  sx={{
    svg: {
      height: "20px",
    },
  }}
/>

this temporary workaround works like a charm, thanks for the quick response!

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

mui-tel-input is also new and well maintained :)