fixed overlapping flags problem when the input field was used for mor…

…e than one number in single form
Jaikant · Oct 10, 2016 · fb94c41 · fb94c41
1 parent fd4e847
commit fb94c41
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/less/default.less b/less/default.less
@@ -702,7 +702,7 @@
     .v-hide {
         visibility: hidden;
     }
-    input[type=text], 
+    input[type=text],
     input[type=tel] {
         position: relative;
         z-index: 0;
@@ -797,7 +797,7 @@
     .country-list {
         list-style: none;
         position: absolute;
-        z-index: 2;
+        z-index: 15;
         padding: 0;
         margin: -1px 0 0 -1px;
         box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
@@ -835,5 +835,5 @@
         .country-name {
             margin-right: 6px;
         }
-    }  
-}
+    }
+}
diff --git a/lib/ReactTelephoneInput.js b/lib/ReactTelephoneInput.js
@@ -299,6 +299,10 @@ var ReactTelephoneInput = React.createClass({
             selectedCountry: newSelectedCountry.dialCode.length > 0 ? newSelectedCountry : this.state.selectedCountry
         }, function () {
             if (isModernBrowser) {
+                if (caretPosition === 1 && formattedNumber.length === 2) {
+                    caretPosition++;
+                }
+
                 if (diff > 0) {
                     caretPosition = caretPosition - diff;
                 }
@@ -350,7 +354,16 @@ var ReactTelephoneInput = React.createClass({
         this._fillDialCode();
     },
     _mapPropsToState: function _mapPropsToState(props) {
-        var inputNumber = props.initialValue || props.value || '';
+        var inputNumber = undefined;
+
+        if (props.value !== this.props.value) {
+            inputNumber = props.initialValue;
+        } else if (props.initialValue !== this.props.initialValue) {
+            inputNumber = props.initialValue;
+        } else {
+            inputNumber = '';
+        }
+
         var selectedCountryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
         var selectedCountryGuessIndex = findIndex(allCountries, selectedCountryGuess);
         var formattedNumber = this.formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-telephone-input",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "description": "React component for entering and validating international telephone numbers",
   "main": "lib/ReactTelephoneInput.js",
   "scripts": {