Area code of Zone +1 is absorbed, always leading to a USA phone number

[Samb102]

Hello

Expected Behavior

When I iniatialize the react-intl-tel-input with a Zone +1 initial value (except USA), the plugin should understand that there is an area code after my +1.

Current Behavior

When I iniatialize the react-intl-tel-input with a Zone +1 initial value (except USA), the plugin absorb the area code, and always considers it as an USA phone number.

Possible Solution

Currently digging.

Steps to Reproduce

1. Store somewhere a Zone +1 phone number, except USA. Let's take for example +1 416 546 5864 (= Canada)

2. On the mouting of the component containing an input react-intl-tel-input, set initial value of the input with +1 416 546 5864.

3. Note that area code has been eaten by the input, it only remains +1 546 5864 (= wrong USA phone number)

Environment

• Version: v7.0.1

• Browser: Chrome

Detailed Description

I think we do something in the wrong way. As we are from Europe we just realized this now. And I'm pretty sure that Americans people would have noticed this bug a lot before. Let me know what i'm doing wrong. Thanks.

[Samb102]

Sorry, I just realized this is a duplicate of https://github.com/patw0929/react-intl-tel-input/issues/238 but maybe better explained.

[patw0929]

Do you mean set the initial value by defaultValue prop as +1 416 546 5864?

I've made a test at https://repl.it, here is the demo, and it seems works as expect:

I'm not sure what I missed. So, can you reproduce your situation on repl.it? You can fork it: https://repl.it/@patw0929/react-intl-tel-input

[Samb102]

After a few tries and some misunderstanding, it works well with defaultValue, thank you, but...

Doesn't it seem weird that the plugin observes to defaultValue prop changes ?

Because what I didn't get it in the first tries, is that I was convinced that value prop was mandatory and defaultValue was completely static.

Anyway, a big TY. I'm closing this as this is not a bug but a design opinion.

[Samb102]

I'm reopening the issue. Using defaultValue prop fixed half of the problem.

With defaultValue, when you type +1 416 546 5864 from the beginning, area code 416 got eaten and so you have to type it twice.

It doesn't happen with value prop.