patw0929 / react-intl-tel-input

Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)

React-Intl-Tel-Input

Rewrite International Telephone Input in React.js.

Collaborators Wanted!

Due to the long commuting time, I do not have much time to maintain this project often. 😣

So if anybody else is willing to take on the work of bug fixes, integrating pull requests, etc, please let me know. 🙌

I hope we can maintain the project together, and make this project better! 💪

Demo & Examples

Live demo: patw0929.github.io/react-intl-tel-input

To build the examples locally, run:

yarn
yarn website:start

Then open localhost:3000 in a browser.

Installation

yarn add react-intl-tel-input

TypeScript

react-intl-tel-input ships with official type declarations out of the box.

Usage

import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

Properties

Please see the Demo Page

Development (src and the build process)

To build, watch and serve the examples (which will also watch the component source), run yarn website:start.

You can prepare a distribution build using yarn build.

Contributing

Any kind of contribution including proposals, doc improvements, enhancements, bug fixes are always welcome.

To contribute to react-intl-tel-input, clone this repo locally and commit your code on a separate branch. Please write tests for your code, and run the linter before opening a pull-request:

yarn test    # if you are enhancing the JavaScript modules
yarn test:ts # if you are enhancing the TypeScript type declarations
yarn lint

Also, please let us know if you encounter any issue by filing an issue.

Inspired by

International Telephone Input - @jackocnr

License

MIT

Copyright (c) 2015-2019 patw.

react-intl-tel-input's Issues

Invalid defaultCountry throws an exception that cannot be caught

If you create a IntlTelInput with a invalid country code, and try to interact with the control, every change event is met with the error:
Uncaught Error: No country data for "ob"

I don't know how to intercept this as the event is kicked off by (ReactEventListener.dispatchEvent @ ReactEventListener.js:204) and fails in the libphonenumber/util.js

And the UI doesn't respond (i.e selecting another flag) to overwrite the incorrect code

Issues with redux-router(react-router)

I'm using react-intl-tel-input with redux-router, after I change page, component unmounts, then, when I return to registration page, component unmounts again. Because of this, eventListeners of keydown stops working, and the whole keyboard input on the page blocks. How this can be fixed?

hover on flag showing - undefined : + undefined

Uncaught TypeError: Cannot assign to read only property 'defaultCountry' of #<Object>

<ReactTelephoneInput
                                        defaultCountry={'auto'}
                                        geoIpLookup={this.lookup.bind(this)}
                                        css={['intl-tel-input', 'form-control']}
                                        utilsScript={'libphonenumber.js'}
                                        onPhoneNumberChange={this.handlePhoneNumberChange.bind(this)}
                                        autoPlaceholder={false}
                                        autoHideDialCode={false}
                                        preferredCountries={['in','ae']}
                                       />

I used the same lookup function as given in the demo page. But yet, on call success I get this.

Uncaught TypeError: Cannot assign to read only property 'defaultCountry' of #<Object>

The trace shows it to be in a function autoCountryLoaded()

if (this.props.defaultCountry === 'auto') {
        this.props.defaultCountry = this.autoCountry;
        this.autoCountryDeferred.resolve();
      }

Am I doing something wrong? or is this an issue

Number is not formatted

Hi @patw0929 :)
The formatting is not working when you input a number. Tested the demo: http://patw0929.github.io/react-intl-tel-input/.

Do you have any idea what could cause this issue?

Multiple inputs on the same page share events

If you have two inputs on the same page, their state/events are linked. Anything that happens on one happens on the other

Remove devtool: 'eval' from dist build script

When eval devtool is removed

1. the size of built main.js drops from ~140 kB to ~80 kB
2. there is no evaled code in production build :)

Do you use the same configuration for production build and example or can I just remove devtool and watch params from webpack.dist.config.js and send PR?

Use redux-form?

Any thoughts on using redux-form for this project?

example of phone number normalization:
http://erikras.github.io/redux-form/#/examples/normalizing

How to prevent onPhoneNumberChange?

Hey, I need to allow only digits. Do you have some example how to do it?

Thanks.

constructor should not mutate state

I'm getting a warning when using the component
Warning: setState(...): Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

It seems like constructor method is dispatching an action, and thus mutating state in https://github.com/patw0929/react-intl-tel-input/blob/master/src/containers/IntlTelInputApp.js#L132

getInitialState() should be used instead ... see a similar issue in this discussion see acdlite/redux-router#171 (comment)

`Uncaught TypeError: Cannot read property 'parentNode' of null`

I managed to add the component into my form, even though getting the value from the component was a little fiddly. However, I am now getting the above error - it's not breaking anything else, but this logs to the console and I'd like to resolve it.

isGoodBrowser throws an error when trying to render from server

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

I'm using the library in an isomorphic application and since isGoodBrowser is trying to access the document object, it crashes when node resolves the module.

It doesn't seem like this is being used anymore. I have since forked the library and applied the fix from the 3.0.0 tag because I'm still using react 0.14 but I could open a pull request with the changes if you think that makes sense.

Thanks!

Remove `eval` call

Any reason to use eval here? This is actually a problem for me, as our standards simply do not allow evals to be used.
https://github.com/patw0929/react-intl-tel-input/blob/master/src/containers/IntlTelInputApp.js#L594

If it's data, why not relpace it with JSON.parse(data)?

Result/Status shows false when separateDialCode is set to true

When separateDialCode is set to true, the user sees the flag of the country and the country code. The placeholder shows the 10 digit phone number. So the user needs to enter the phone number, excluding the country code. The validation of this number returns false.
If the user enters the complete number which includes the country code, the validation is true, but the number now contains the country code two times.

Here is the console log output on entering the 10 digit phone number but returning false:

false "9886106999" Object {name: "India (भारत)", iso2: "in", dialCode: "91", priority: 0, areaCodes: null} "[phone]" null

Here is the console log on entering the country code as well, which returns true, but the number now has the country code twice:

true "[phone]" Object {name: "India (भारत)", iso2: "in", dialCode: "91", priority: 0, areaCodes: null} "+91+919886106999" ""

I checked the code - it happens as the validation is happening using newNumber, instead it could do the isValidNumber on the output of this.getNumber(newNumber). I am a newbie in javascript, so the experts could check and correct it please.

----------->
notifyPhoneNumberChange(newNumber) {
if (typeof this.props.onPhoneNumberChange === 'function') { if (typeof this.props.onPhoneNumberChange === 'function') {
let result = this.isValidNumber(newNumber); let result = this.isValidNumber(newNumber);

•  this.props.onPhoneNumberChange(result, newNumber, this.selectedCountryData);         +      this.props.onPhoneNumberChange(result, newNumber, this.selectedCountryData, this.getNumber(newNumber));
  

  } }
  } }

Edit: Possibly a related issue, is when the country is changed the onPhoneNumberChange method is not called. This is for the user who for some weird reason first enters his number and then changes the flag.

Webpack Build error in Example

$ npm start

> [email protected] start /Users/dm/src/react-intl-tel-input
> grunt serve

(node:32251) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Running "serve" task

Running "open:dev" (open) task

Running "webpack-dev-server:start" (webpack-dev-server) task
webpack-dev-server on port 8000
 57% 24/30 build moduleswebpack: wait until bundle finished: /assets/example.js
Version: webpack 1.13.1
                               Asset     Size  Chunks       Chunk Names
7cfe278676bdae748e97ea891670bfc6.png  21.3 kB
c03843db66eddc733e62d6e7146a4571.png  65.2 kB
                   libphonenumber.js   213 kB
832caecd20164c95698a84b5c36c32ae.png  20.6 kB
                          example.js   224 kB       0       example
                             main.js   195 kB       1       main

ERROR in ./src/example.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src
 @ ./src/example.js 1:302-333

ERROR in ./src/containers/IntlTelInputApp.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/containers
 @ ./src/containers/IntlTelInputApp.js 1:302-333

ERROR in ./src/components/AllCountries.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/AllCountries.js 1:302-333

ERROR in ./src/components/FlagDropDown.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/FlagDropDown.js 1:302-333

ERROR in ./src/components/utils.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/utils.js 1:302-333

ERROR in ./src/components/TelInput.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/TelInput.js 1:302-333

ERROR in ./src/components/CountryList.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/CountryList.js 1:302-333

ERROR in ./src/components/RootModal.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/dm/src/react-intl-tel-input/src/components
 @ ./src/components/RootModal.js 1:302-333
webpack: bundle is now VALID.

Utils script does not load

Hi,
I tried to use this library in my project but it does not load utils script. There is no request in chrome developer tools. Do you have any idea what could cause it?

import IntlTelInput from 'react-intl-tel-input';

export default class PhoneInput extends React.Component {

    // ...

    render() {
        return <div className="form-group">
            {this.props.label && <label className={classnames('control-label', this.props.labelClassName)}>
                {this.props.label}
            </label>}
            <IntlTelInput
                onPhoneNumberChange={this.handleChange}
                css={['intl-tel-input', 'form-control']}
                value={this.props.value}
                defaultCountry={this.props.initialCountry ? this.props.initialCountry.toLowerCase() : ''}
                utilsScript="/assets/libphonenumber.js"
            />
        </div>;

        // I can put anything to utilsScript, the result is still the same
    }

}

Ability to disable?

Sorry if this is already supported but I cannot disable the input by passing a disabled prop to the phone component. Is there another way?

Remove Redux

I love redux but I don't think it is useful on such a small component. It makes sense to me to keep the state in one place but I think the place should be App or IntlTelInputApp component.

Getting React render error when including IntlTelInput element

I have a ReactJS component, which renders a IntlTelInput component.

I'm using Browserify and Babelify to create the JS. At the top of my component, I have

var IntlTelInput = require('react-intl-tel-input');
require('file?name=libphonenumber.js!./../../../node_modules/react-intl-tel-input/dist/libphonenumber.js');

Then, in my component's render method I have this

<div className="required field">
    <IntlTelInput css={['intl-tel-input']} utilsScript={'libphonenumber.js'} onPhoneNumberChange={this.handleSMSChange}></IntlTelInput>
</div>

Unfortunately, the browser spits an error when I try to view the page

 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)

Remove the IntlTelInput element and everything is fine.

Would you be able to guide me to fix this problem?

Puerto Rico flag changes to US flag while typing the number

Not sure about the extent of the issue, seems to be related to countries with the same dial code (they're both +1)

Steps to reproduce:

1. Open demo page http://patw0929.github.io/react-intl-tel-input/
2. Select Puerto Rico
3. Type 1234
4. As soon as you type 4, the flag changes to US flag

Is this expected? Any way to disable this behavior?

How to include this package only once using webpack?

Atm, one of my components has this:

require('file?name=libphonenumber.js!../../node_modules/react-intl-tel-input/dist/libphonenumber.js');
require('../../node_modules/react-intl-tel-input/dist/styles/intlTelInput.scss');
import IntlTelInput, {AllCountries, CountryList} from 'react-intl-tel-input';

And then later on the component looks like this:

          <IntlTelInput
            css={['intl-tel-input']}
            utilsScript={'/scripts/libphonenumber.debug.js'}
            numberType='MOBILE'            
            preferredCountries={['AU', 'US', 'UK', 'NZ', 'IN', 'CA', 'DE', 'HK', 'SG']}
            defaultValue={this.props.mobileNumber}
            defaultCountry={this.props.countryCode}
            onPhoneNumberChange={this.onChange.bind(this)}
          >

However, webpack will package up libphonenumber.js into my main or vendor js and then the user will have to download another version for utilsScript.

I'm trying to separate out the libphonenumber into it's own bundle so it can be referenced by the utilsScript and also by my component. Is this the way to go and how would I go about doing this?

React & ReactDOM are included in dist/main.js

The React and ReactDOM are part of dist/main.js

This causes react to be double loaded which causes issues.

Component does not work independently

Probably not a common use case, but the component doesn't work independently in case there is more than one in the page.

e.g., if you render two IntlTelInput components on the same page and click one of them, both expand

Phone number input is focused on page load

Not sure why but the phone input is focused by default when the page loads. This looks weird on my form because phone input is in the middle of my form.

defaultValue behaves differently for US based numbers (+1201.....)

When I set the defaultValue to be something like "[phone]" or "[phone]" the onPhoneNumberChanged handler is called twice with the last call being:
false "[phone]" Object {} ""

When the default value does not start with the +, then it recognises the number:
true "1 202-555-5555" Object {name: "United States", iso2: "us", dialCode: "1", priority: 0, areaCodes: null} "[phone]"

This behaviour is reversed for all other countries I've tried (gb, ca, au), ie when the number is preceeded with a +, the onPhoneNumberChanged returns the correctly detected country code and number.

It seems that defaultCountry does not affect this behaviour, I've run the same tests with it set to the correct country, a different country, a empty string or not even declaring it and it has no effect.

My workaround is atm, if the country code I'm storing is 'us' then I regex remove the + from the number.

Update to react 15

Hi,
can this (cool) component be updated to react 15.1.0?
I've done this in a fork, but I'm not sure if it's used by you somewhere else and this update will produce problems for you.
The test ran ok, but I get some linting errors (no-underscore-dangle, react/jsx-first-prop-new-line, react/prefer-stateless-function, no-restricted-syntax, comma-spacing) where I'm not sure if you want to follow them or not (I would ;) )
thanks for a reply
Lars

It is not possible to set default value with value prop

Hi,
Property value does not set default value of phone input. It only works with defaulValue prop. But I don't think users should be forced to duplicate default value into two props.

class DemoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      phone: '[phone]',
    };
  }

  onChange(isValid, value, countryData, number) {
    this.setState({
      phone: number,
    });
  }

  render() {
    return (
      <div>
        <IntlTelInput
          value={this.state.phone}
          // defaultValue={this.state.phone} <--- works when uncommented
          onPhoneNumberChange={this.onChange}
          css={['intl-tel-input', 'form-control']}
          utilsScript="assets/libphonenumber.js"
        />
        <div>Phone Number: {this.state.phone}</div>
      </div>
    );
  }
}

Numbers not spaced after updates

Hello,

I just updated your (amazing) lib from 2.3.x to 3.1.1 and I lost a pretty neat feature, the spacing of the phone number (which can be seen in the placeholder for example).

Could you please take a look at this please?

Thanks in advance!

Cleanup package.json

Dependencies used directly by source code should be defined in dependencies instead of devDependencies.

Configurable country list data

Hey, I have the country data from a different source and would really like to be able to map it and pass it to the component instead of the hard coded AllCountries.js values. Is that a feature that you would be willing to add?

I was thinking that the actual data in AllCountries.js could live separately from the mapping function, this way it could be possible to pass the data down that defaults to the list living there in case nothing is provided.

value prop not defined

In the demo page http://patw0929.github.io/react-intl-tel-input/, under Props section, both defaultValue and value are mentioned as props. I tried passing a phone number in value as props and did not work.
So, went ahead an checked https://github.com/patw0929/react-intl-tel-input/blob/master/src/containers/IntlTelInputApp.js

It seems value is not defined anywhere in code. Only defaultValue is present.

 static propTypes = {
    css: PropTypes.arrayOf(PropTypes.string),
    fieldName: PropTypes.string,
    defaultValue: PropTypes.string,
    allowExtensions: PropTypes.bool,
    autoFormat: PropTypes.bool,
    autoPlaceholder: PropTypes.bool,
    autoHideDialCode: PropTypes.bool,
    defaultCountry: PropTypes.string,
    geoIpLookup: PropTypes.func,
    nationalMode: PropTypes.bool,
    numberType: PropTypes.string,
    onlyCountries: PropTypes.arrayOf(PropTypes.string),
    preferredCountries: PropTypes.arrayOf(PropTypes.string),
    utilsScript: PropTypes.string,
    onPhoneNumberChange: PropTypes.func,
    dispatch: PropTypes.func,
    intlTelInputData: PropTypes.object,
    countryCode: PropTypes.string
  };

Also, you check only defaultValue before updating

  setInitialState() {
    let val = this.props.defaultValue || '';
    // if there is a number, and it's valid, we can go ahead and set the flag, else fall back to default
    if (this.getDialCode(val)) {
      this.updateFlagFromNumber(val);
    } else if (this.props.defaultCountry !== 'auto') {
      // check the defaultCountry option, else fall back to the first in the list
      let defaultCountry = this.props.defaultCountry;
      if (!this.props.defaultCountry) {
        defaultCountry = (this.preferredCountries.length) ? this.preferredCountries[0].iso2 : this.countries[0].iso2;
      }
      this.selectFlag(defaultCountry);

      // if empty, insert the default dial code
      // (this function will check !nationalMode and !autoHideDialCode)
      if (!val) {
        this.updateDialCode(this.selectedCountryData.dialCode, false);
      }
    }

    // format
    this.updateVal(val);
  }

libphonenumber.js AJAX request happens many times in one page app

Any reason why the utilsScript needs to be loaded on an AJAX call?
The request is triggered every time the page loads, so on an one page app, every time you render the page that has the component triggers a new network request for that lib, so you end up having multiple requests for the same asset, plus, in componentDidMount the placeholder is not yet defined.

Is it just to reduce the size of the bundle? If that's the case, an idea would be to export two different bundles, so you would be able to require('react-intl-tel-input') or require('react-intl-tel-input/no-util') (or whatever name).

Another thing would be to use it as a dependency instead of having it copied into the project https://github.com/seegno/google-libphonenumber (didn't do a POC, so not sure if it's a straight-forward change)

Inspirational competition

I think I'll probably stop using your component. There is this one on the market which is much more fun to use:

http://picturelements.github.io/phonesnake?type=nine

React shouldn't be a dependency.

I encountered a problem when I upgraded my app to react 0.14. Installing react-intl-tel-input would install a second react 0.13.3, then at bundling/runtime, it would break. My solution was to modify the package.json and put react as a devDependencies, then I could install/run it with no conflicts. I am also using npm 3 to install.

Could you release a 0.0.12 and 1.2.5 with that fix?

Auto focus on load component

If you load demo page, you can see the intl-tel-input component will get the focus automatically.

This can be good in demo page, but if you put component in middle of a form, autofocus will mess with tabindex.

To avoid this, just pass false in selectFlag function in react-intl-tel-input/src/containers/IntlTelInputApp.js at line 261.

this.selectFlag(this.props.defaultCountry || '', false);

  // set the initial state of the input value and the selected flag
  setInitialState() {
    let val = this.props.defaultValue || '';

    // Init the flag setting
    this.selectFlag(this.props.defaultCountry || '', false);

    // if there is a number, and it's valid, we can go ahead and set the flag, else fall back to default
    if (this.getDialCode(val)) {
      this.updateFlagFromNumber(val);
    } else if (this.tempCountry !== 'auto') {
      // check the defaultCountry option, else fall back to the first in the list
      let defaultCountry = this.tempCountry;
      if (!this.tempCountry) {
        defaultCountry = (this.preferredCountries.length) ? this.preferredCountries[0].iso2 : this.countries[0].iso2;
      }
      this.selectFlag(defaultCountry, false);

      // if empty, insert the default dial code
      // (this function will check !nationalMode and !autoHideDialCode)
      if (!val) {
        this.updateDialCode(this.selectedCountryData.dialCode, false);
      }
    }

    // format
    this.updateVal(val);
  }

Taking advantage this, how can I contribute to code directly without creating a issue here?

Thanks :)

Last input is focused by default (auto focused)

Hi @patw0929 !
Do you know how to remove autofocus on the last react-intl-tel-input used in a view?
Test: Go to http://patw0929.github.io/react-intl-tel-input/ and start typing digits.

Love your work on this component 👍

disabled prop not getting passed to input

The disabled prop never updates the default state of the component it is set here but not updated based on the disabled prop being true therefore not creating a disabled input. (At least I think that is what is going on)

Use bundle-loader to load libphonenumber.js and avoid globals

I just want to open a discussion, it's not a critical issue.

I was playing with webpack's bundle-loader for another project and thought it might be a nice solution to load libphonenumber.js here too. It basically allows you to generate other bundles that may or may not be asynchronously loaded. see https://github.com/webpack/bundle-loader

It would allow the loading of google-libphonenumber code instead of the version currently being distributed here and prevent variables from leaking to the global scope too.

This is a sample of how it would work (code inside loadUtils method):

    var self = this;

    require("bundle?google-libphonenumber")(function(bundle) {
      // save a reference of the library in the component
      // so all other uses don't depend on globals
      self.libphonenumber = bundle;

      self.utilsScriptDeferred.resolve();
    });

Some points:

1. google-libphonenumber module seems bigger than the one in this probject, but it doesn't leak globals as far as I know. see https://github.com/seegno/google-libphonenumber
2. Lib code is still outside of the main react-intl-tel-input bundle and loaded asynchronously, so no size change there.
3. bundle-loader takes a lazy option, which allows us to load the library only if utilsScript is passed
4. The google-libphonenumber API is different than the one here included here, so the change might not be super straightforward

Let me know your thoughts on this

App should not have to depend on SASS

First of all, thanks for this really good component.

I'm having problems with the dependencies though. Using the component should be as easy as var IntlTelInput = require('react-intl-tel-input');, the app using it shouldn't know (or care) that is uses SASS. Same thing for the libphonenumber.js dependency.

Would bundling everything (.js, .css and images) into ONE file be in the interest of the project?

npm start does not work

I have this error there.

ERROR in ./src/example.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./containers/App.js in /Users/janmarek/www/react-intl-tel-input/src
@ ./src/example.js 15:25-56

React 0.14 support

Can you make a 2.0 and 0.0.13 release for react 0.14 support? I'm getting warnings mostly.

How can i get international phone number?

I am about this future:
getNumber
Get the current number in the given format (defaults to E.164 standard). The different formats are available in the enum intlTelInputUtils.numberFormat - taken from here. Requires the utilsScript option. Note that even if nationalMode is enabled, this can still return a full international number.

https://github.com/Bluefieldscom/intl-tel-input#public-methods

Can't load file

I am getting an error with the line import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js'; throws an error: bundle.js:68 Uncaught Error: Cannot find module "file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js"

Class manipulation causes style bug for invalid input

When you type an invalid character the class manipulation is mangling the class attribute in a bad way. You can see this bug on the demo page by typing some letters very quickly.

The class attribute of form-control will soon become form-controliti-invalid-key

This is in part due to the removeClass function being careless. And mostly due to the setTimeout call inside of handleInvalidKey.

This could perhaps be accomplished quite simply with underscore:

removeClass(el, klass) {
  var index,
      elClasses = el.className.split(' ');

  return _.without(elClasses, klass);
}

newProps are not showingup

looks like componenetWillReceiveProps not implemented!

`fallbackFlagInUnkownNanp` doesn't seem to work when `countriesData` is passed

Hey Patrick, I was finally playing with the fallbackFlagInUnkownNanp option, but it doesn't seem to work.

I noticed 2 issues in the PR:

1. Minor typo in the description https://github.com/patw0929/react-intl-tel-input/pull/110/files#diff-3ec40a1e2a924ba4ba6521185d17b0f2R229
2. While debugging, although fallbackFlagInUnkownNanp is set to false, the alreadySelected variable is false as well (as the Puerto Rico example if you remember), so the fallback executes and the same problem happens https://github.com/patw0929/react-intl-tel-input/pull/110/files#diff-8d03d40cef8605ae4608d7284524a5b7R486

here's a cryptic screenshot that might help, the problem might be of how utils.getNumeric work (+1 returns "us", although

It might be the case that this only happens when this.props.countriesData is passed and hence why your tests possibly worked. Do you think this is the wrong place to initialize the countries? https://github.com/patw0929/react-intl-tel-input/blob/master/src/containers/IntlTelInputApp.js#L608

sorry for opening all these issues :/

npm test does not work

Hi,
I am not able to run tests.

$ npm test

> [email protected] test /Users/janmarek/www/react-intl-tel-input
> BABEL_JEST_STAGE=0 jest

Using Jest CLI v0.8.2, jasmine1
Error reading file: `/Users/janmarek/www/react-intl-tel-input/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/async-each/package.json`
/Users/janmarek/www/react-intl-tel-input/node_modules/jest-cli/node_modules/node-haste/lib/loader/ResourceLoader.js:88
      throw err;
      ^

Error: ENFILE: file table overflow, open '/Users/janmarek/www/react-intl-tel-input/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/async-each/package.json'
    at Error (native)
npm ERR! Test failed.  See above for more details.

value prop doesn't work

So, apparently the input value state is held inside the component redux, and I can't change it.

My use case is that a have a form using this, but when the user cancels and opens the form again, the same telephone input stay there, and I don't want that. Even if I pass it explicitly like this:

<IntlTelInput value='' />

It doesn't work. The last value always stays there even if I rerender the component.

Although, the countryCode is always reset to the default one.

Phone number dissappears when auto switch from US to Canada number

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:
[phone], passed
tested typing:
12048151582 passed
tested typing:
2048151582 passed
tested typing:
+1204 fail

If we do the converse Canada to US with input [phone] 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

Use local storage instead of cookie-js

How about removing one more dependency by using native browser API instead of cookie-js library. We don't need real cookies for this.

https://developer.mozilla.org/cs/docs/Web/API/Window/localStorage