search

patw0929 / react-intl-tel-input

Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
https://patw0929.github.io/react-intl-tel-input/
MIT License
283 stars 222 forks source link

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

Open Samb102 opened 5 years ago

Samb102 commented 5 years ago

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)

feb-20-2019 15-47-41

Environment

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 commented 5 years ago

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

patw0929 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.

feb-27-2019 15-03-51