PhoneInput clears its value when country (local state) changes

[pergunt]

I am keeping the value of the component and its country in the local state. After the countryCode changes, I update the state but the value of itself is being cleaned What is interesting the value of the PhoneInput is being cleaned only from UI. It is preserved in the Form's (antd) state

const CustomPhoneInput = ({ value = {}, onChange }) => {
  const [defaultCountryCode, setCountryCode] = useState()
  useEffect(() => {
    let currentLanguage = (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
    currentLanguage = currentLanguage.substring(0, 2)
    setCountryCode(currentLanguage)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const onInputChange = (newValue, {countryCode}, e, formattedValue) => {
    onChange(newValue && {
      value: newValue,
      formattedValue,
      country: countryCode
    })
    if (countryCode !== defaultCountryCode) {
      setCountryCode(countryCode)
    }
  }
  const country = !value.value ? {country: defaultCountryCode} : {}
  const phoneProps = {
    inputStyle: { width: '100%' },
    enableSearch: true
  }
  return <PhoneInput
    country={value.country}
    {...phoneProps}
    value={value.value}
    onChange={onInputChange}
    enableSearch
  />
}

[lincolncooper]

I have exactly the same problem. Either changing the flag or writing a new prefix clears the phone number. Unfortunately this makes this component unusable for me.

[purpleow1]

Same problem. Temporarily fixed this by storing the value prop in the state of the custom component before using it in ReactPhoneInput.

const PhoneInput = ({
  value: valueProp,
  country,
  onChange,
}) => {
  const onInputChange =(value, country) => onChange(value, country.countryCode);

  const [value, setValue] = useState(valueProp);

  useEffect(() => {
    setValue(valueProp);
  }, [valueProp]);

  return (
    <ReactPhoneInput
      country={country}
      value={value}
      onChange={onInputChange}
    />
  );
};

[lincolncooper]

Thanks for that - I am working around the problem by not using the country prop, but concatenating the prefix and phone number together and just using value. It selects the flag automatically and there doesn't seem to be any wierd behaviour.

[Aryan-mor]

    const [phone, setPhone] = useState('')
    const [country, setCountry] = useState('gb')

    return (
            <PhoneInputBase
                inputProps={{
                    name,
                    required
                }}
                placeholder={errorLabel}
                country={country}
                value={phone}
                onChange={(phone, {countryCode, dialCode,} = {}) => {
                    if (country === countryCode) {
                        setPhone(phone)
                        return
                    }
                    setCountry(countryCode)
                    setPhone(dialCode)

                }}
            />
    )