Phone number not visible after using Safari auto fill with countryCodeEditable as false

Hello,

I am rendering PhoneInput component using following properties:

const textFieldStyle: React.CSSProperties = {
  marginTop: 0,
  color: grey[100],
  backgroundColor: "white",
  borderRadius: 5,
};

<PhoneInput
    value={phone}
    onChange={(v: string) => setPhone(`+${v}`)}
    inputStyle={{
      ...textFieldStyle,
    }}
    dropdownStyle={{
      position: "fixed",
      width: "calc(100% - 4rem)",
      maxWidth: 800,
      marginTop: -200,
    }}
    placeholder="2222555666"
    country="us"
    isValid={!phoneError}
    label=""
    countryCodeEditable={false}
    buttonStyle={{ paddingLeft: 2, width: 20 }}
    component={TextField}
  />

When using Safari browser on iPhone, there is an option to auto fill phone numbers but it shows an empty state after entering the phone number.

After debugging a bit, I realized that the auto fill works if countryCodeEditable istrue. When false, onChange listener in the library's component does not receive the e.target.value prefixed with a country code which causes the issue. It would be great if we can find the fix for this issue as lot of users are facing the problem.

Here's a video to demo the issue: Phone: IPhone 14 Pro Browser: Safari React: 18.2 library: react-phone-input-material-ui@2.18.1

https://github.com/harish-everest/react-phone-input-mui/assets/103044097/9d1221e2-1d61-4997-86e8-bbd6299f4657

harish-everest / react-phone-input-mui

Phone number not visible after using Safari auto fill with countryCodeEditable as false #23