Fix to enable autocomplete or paste when countryCodeEditable is false

LICENSE

@@ -1,5 +1,6 @@
 The MIT License (MIT)
 
+Copyright (c) 2020-2021 Jonathan Calb <[email protected]> (https://github.com/jonathancalb)
 Copyright (c) 2017-2020 Nick Reiley <[email protected]> (https://github.com/bl00mber)
 Copyright (c) 2015-2017 Raza Gill <[email protected]> (https://github.com/razagill)
 

README.md

@@ -1,22 +1,22 @@
-# React-Phone-Input-2
+# React-Phone-Input-International
 Highly customizable phone input component with auto formatting.
 
-[![npm version](https://img.shields.io/npm/v/react-phone-input-2.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-2)
-[![npm downloads](https://img.shields.io/npm/dm/react-phone-input-2.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-2)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bl00mber/react-phone-input-2#contributing)
-[![travis build](https://travis-ci.org/bl00mber/react-phone-input-2.svg?branch=master)](https://travis-ci.org/bl00mber/react-phone-input-2)
+[![npm version](https://img.shields.io/npm/v/react-phone-input-international.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-international)
+[![npm downloads](https://img.shields.io/npm/dm/react-phone-input-international.svg?style=flat)](https://www.npmjs.com/package/react-phone-input-international)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bl00mber/react-phone-input-international#contributing)
+[![travis build](https://travis-ci.org/bl00mber/react-phone-input-international.svg?branch=master)](https://travis-ci.org/bl00mber/react-phone-input-international)
 
 ![animation](https://media.giphy.com/media/xiORAWnqoTJDsH0UOI/giphy.gif)
 
 ## Installation
 ```shell-script
-npm install react-phone-input-2 --save
+npm install react-phone-input-international --save
 ```
 
 ## Usage
 ```jsx
-import PhoneInput from 'react-phone-input-2'
-import 'react-phone-input-2/lib/style.css'
+import PhoneInput from 'react-phone-input-international'
+import 'react-phone-input-international/lib/style.css'
 
 <PhoneInput
   country={'us'}
@@ -26,9 +26,9 @@ import 'react-phone-input-2/lib/style.css'
 ```
 **available styles** - style • high-res • material • bootstrap • semantic-ui • plain
 
-#### [Demo 1 (UI)](https://bl00mber.github.io/react-phone-input-2.html) - [Demo 2 (CSS)](https://bl00mber.github.io/react-phone-input-2-css.html)
+#### [Demo 1 (UI)](https://bl00mber.github.io/react-phone-input-international.html) - [Demo 2 (CSS)](https://bl00mber.github.io/react-phone-input-international-css.html)
 
-![screenshot](https://raw.githubusercontent.com/bl00mber/react-phone-input-2/master/test/screenshot.png)
+![screenshot](https://raw.githubusercontent.com/bl00mber/react-phone-input-international/master/test/screenshot.png)
 
 ## Options
 <table>
@@ -302,7 +302,7 @@ Country data object not returns from onKeyDown event
 `ir` Iranian, `ar` Arabic, `tr` Turkish, `id` Indonesian
 
 ```jsx
-import es from 'react-phone-input-2/lang/es.json'
+import es from 'react-phone-input-international/lang/es.json'
 
 <PhoneInput
   localization={es}
@@ -470,7 +470,7 @@ To clear `country`, pass `null` as `value`.
 
 ### CDN
 ```html
-<script src="https://unpkg.com/react-phone-input-2@2.x/dist/lib.js"></script>
+<script src="https://unpkg.com/react-phone-input-international@2.x/dist/lib.js"></script>
 ```
 
 ## Contributing
@@ -479,7 +479,7 @@ To clear `country`, pass `null` as `value`.
 - Do not send new languages
 
 ## License
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bl00mber/react-phone-input-2/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bl00mber/react-phone-input-international/blob/master/LICENSE)
 
 Based on [react-phone-input](https://github.com/razagill/react-phone-input)
 

index.d.ts

@@ -1,4 +1,4 @@
-declare module "react-phone-input-2" {
+declare module "react-phone-input-international" {
   import React from "react";
 
   interface CountryData {

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-phone-input-2",
-  "version": "2.13.9",
-  "description": "A react component to format phone numbers",
+  "name": "react-phone-input-international",
+  "version": "2.14.1",
+  "description": "A react component to format phone numbers. Fork from https://github.com/bl00mber/react-phone-input-2",
   "main": "lib/lib.js",
   "typings": "index.d.ts",
   "scripts": {
@@ -16,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bl00mber/react-phone-input-2.git"
+    "url": "git+https://github.com/jonathancalb/react-phone-input-international.git"
   },
   "keywords": [
     "react",
@@ -40,15 +40,16 @@
     "README.md",
     "index.d.ts"
   ],
-  "author": "Nick Reiley <bloomber111@gmail.com> (https://github.com/bl00mber)",
+  "author": "Jonathan Calb <jonathancalb@gmail.com> (https://github.com/jonathancalb)",
   "contributors": [
+    "Nick Reiley <[email protected]> (https://github.com/bl00mber)",
     "Raza Gill <[email protected]> (https://github.com/razagill)"
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/bl00mber/react-phone-input-2/issues"
+    "url": "https://github.com/jonathancalb/react-phone-input-international/issues"
   },
-  "homepage": "https://github.com/bl00mber/react-phone-input-2",
+  "homepage": "https://github.com/jonathancalb/react-phone-input-international",
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$": "<rootDir>/test/__mocks__/fileMock.js",
@@ -91,5 +92,9 @@
     "lodash.reduce": "^4.6.0",
     "lodash.startswith": "^4.2.1",
     "prop-types": "^15.7.2"
+  },
+  "directories": {
+    "lib": "lib",
+    "test": "test"
   }
 }

src/index.js

@@ -513,8 +513,9 @@ class PhoneInput extends React.Component {
         this.state.onlyCountries.find(o => o.iso2 === newSelectedCountry.iso2 && o.mainCode).dialCode :
         newSelectedCountry.dialCode;
 
+      const valueWithPrefix = prefix+value;
       const updatedInput = prefix+mainCode;
-      if (value.slice(0, updatedInput.length) !== updatedInput) return;
+      if (value.slice(0, updatedInput.length) !== updatedInput && valueWithPrefix.slice(0, updatedInput.length) !== updatedInput) return;
     }
 
     if (value === prefix) {

test/dev:css/demo.js

@@ -57,7 +57,7 @@ class Demo extends React.Component {
         `}} />
         <div style={{display: 'inline-block', verticalAlign: 'top'}}>
           <p style={{fontWeight: '500'}}>Created by <a style={{color: '#000'}}
-            href="https://github.com/bl00mber/react-phone-input-2">Nick Reiley</a></p>
+            href="https://github.com/bl00mber/react-phone-input-international">Jonathan Calb</a></p>
           <p>
             <span onClick={this.updateStyle}
               className={'style-btn'+('style'==currentStyle?' active':'')}>style</span> — <span onClick={this.updateStyle}
@@ -82,7 +82,7 @@ class Demo extends React.Component {
         </div>
 
         <div style={{display: 'inline-block', marginLeft: '40px', position: 'absolute', top: '30px', left: '560px'}}>
-          <p>{"import 'react-phone-input-2/lib/"+currentStyle+".css'"}</p>
+          <p>{"import 'react-phone-input-international/lib/"+currentStyle+".css'"}</p>
         </div>
       </div>
     )

test/dev:js/demo.js

@@ -44,7 +44,7 @@ class Demo extends React.Component {
           }
         `}} />
         <p style={{fontWeight: '500'}}>Created by <a style={{color: '#000'}}
-          href="https://github.com/bl00mber/react-phone-input-2">Nick Reiley</a></p>
+          href="https://github.com/bl00mber/react-phone-input-2">Jonathan Calb</a></p>
         <div style={{display: 'inline-block', verticalAlign: 'top'}}>
           <p>Exclude countries (usa, canada)</p>
           <PhoneInput
@@ -62,6 +62,15 @@ class Demo extends React.Component {
             country='it'
             preferredCountries={['it', 'se']}
           />
+          <p>Autocomplete</p>
+          <PhoneInput
+            country='us'
+            countryCodeEditable={false}
+            autocompleteSearch={true}
+            inputProps={{
+              name: "mobileNumber",
+            }}
+          />
         </div>
 
         <div style={{display: 'inline-block', marginLeft: '40px'}}>