Issue with Canada/USA, Russia/Kazakhstan, countries with same calling code

[ghost]

Hi, If from the dropdown we select Canada which has the same calling code as the USA. The component will show USA flag. Same for other countries with the same callin code.

Here is a link for sandbox: https://codesandbox.io/s/boring-lake-fe5o5?file=/src/App.js

[Manimall]

https://github.com/bl00mber/react-phone-input-2/issues/398

[Manimall]

Hi, If from the dropdown we select Canada which has the same calling code as the USA. The component will show USA flag. Same for other countries with the same callin code.

Here is a link for sandbox: https://codesandbox.io/s/boring-lake-fe5o5?file=/src/App.js

definitely, it's a huge bug

[Manimall]

i found i kinda-of solution there, it's not pretty, but in the end - it works)

We can use fourth argument in onChange fn - and create a wrapper component to avoid this problem -

const PhoneInputWrapper: FC<PhoneInputWrapperProps > = ({
  value,
  onChange,
  ...props
}) => {
  const [phoneValue, setPhoneValue] = useState(value);

  const handlePhoneChange = useCallback(
    (
      value: string,
      _data: Record<string, never>,
      _e: ChangeEvent<HTMLInputElement>,
      formattedValue: string,
    ) => {
      // saving and sending unformatted value to backend
      onChange(value);

      // changing the component state correctly
      setPhoneValue(formattedValue);
    }, []);

  return (
    <PhoneInput
      { ...props }
      value={phoneValue}
      onChange={handlePhoneChange} />
  );
};

export default PhoneInputWrapper;

[Anton-SN]

I found a similar problem and its solution https://github.com/bl00mber/react-phone-input-2/issues/221

[dev-mani7]

any buddy got solution for this issue?

[TheEagleGame]

I add this areaCodes={{ kz: [7, 6] }} and now it works fine for Kazahstan +76...., +77... - now it Kazahstan (not Russia)

[hafidFrn]

just add disableCountryGuess= {true}

[valentynay06]

In input, we display only 2 country have a problem when enter Canada number, after component re-render country change to the USA.