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
284 stars 221 forks source link

Phone number dissappears when auto switch from US to Canada number #118

Open akpatel7 opened 8 years ago

akpatel7 commented 8 years ago

Hi,

I am having issues when switching from US to Canada.

To reproduce: Set Flag to US. Start typing +1204 Expected: Flag will detect Canada and switch to Canadian Flag with +1-204 in the input. Actual: Flag detects Canada and switches to Canadian Flag with +1 in the input. (We loose the area code). tested with cut and paste: +12048151582, passed tested typing: 12048151582 passed tested typing: 2048151582 passed tested typing: +1204 fail

If we do the converse Canada to US with input +19493669077 this issue doesn't happen. This issue is also present on your demo page: http://patw0929.github.io/react-intl-tel-input/

Any idea how to fix this?

Thanks, Amit

patw0929 commented 8 years ago

Could you help to check that is there still have same bug in the v3.0.0 version? The demo page is upgraded to v3.0.0 too.

Thanks!

mgibeau commented 8 years ago

I've experience this issue in 3.0.0, the problem happens when the separateDialCode property is set to true. Seems like it's an expected behavior, but I might be confused as to what the property should do...

https://github.com/patw0929/react-intl-tel-input/blob/v3.0.0/src/containers/IntlTelInputApp.js#L937

davidrenne commented 8 years ago

Im not sure if this is the same case as me (this is the closest bug to the issue I am having), but I am trying to dynamically change my defaultCountry prop to make a switch of my country from another component. And when it does so, nothing really happens to my phone number. It remains in USA +1 format instead of reflecting the new prop value's change.

The below commit is what I (think) could fix my problem, but it isnt easy to inject this into my minified dist code.

https://github.com/davidrenne/react-intl-tel-input/commit/0fab6fbdfe9cdd323c11f45eda690dc342c3c126

Basically even though my props are passing a different country code (showing it is updating in react tools from a non static prop passed), it isnt updating I think because of only notifying a phone number change when props are changed. Could something like this be useful for people like me who are trying to use the defaultCountry to switch the country programmatically?

I dont know how to recompile the dist in this project to test this, but my work around currently on the dist provided in master is to do something like this:

this.phoneRef.getRef().setFlag(this.state.SelectedCountryIso, false);

When I ref out all my sub components to get access to internal methods of the library, calling setFlag when my outer component changes (billing country select box). Calling this finally re-renders the entire component to show the appropriate matched country from an outside source which is driving these phone inputs.

Was this not the intended behavior of defaultCountry? Or is this a one time static prop that is not intended to be manipulated from the callers?