Fixed issue 260

src/components/IntlTelInputApp.js

@@ -1177,21 +1177,7 @@ class IntlTelInputApp extends Component {
   // Either notify phoneNumber changed if component is controlled
   // or udpate the state and notify change if component is uncontrolled
   handleInputChange = e => {
-    let cursorPosition = e.target.selectionStart;
-    const previousValue = e.target.value;
-    const previousStringBeforeCursor =
-      previousValue === ''
-        ? previousValue
-        : previousValue.substring(0, cursorPosition);
-    const value = this.props.format
-      ? this.formatNumber(e.target.value)
-      : e.target.value;
-
-    cursorPosition = utils.getCursorPositionAfterFormating(
-      previousStringBeforeCursor,
-      previousValue,
-      value
-    );
+    const { cursorPosition, value } = this.cursorUpdate(e);
 
     if (this.props.value !== undefined) {
       this.setState(
@@ -1217,6 +1203,33 @@ class IntlTelInputApp extends Component {
     }
   };
 
+  cursorUpdate = ({ target }) => {
+    let cursorPosition = target.selectionStart;
+    const previousValue = target.value;
+    const previousStringBeforeCursor =
+      previousValue === ''
+        ? previousValue
+        : previousValue.substring(0, cursorPosition);
+    let value = this.props.format
+      ? this.formatNumber(target.value)
+      : target.value;
+
+    value = this.props.formatFull
+      ? this.formatFullNumber(target.value)
+      : value;
+
+    cursorPosition = utils.getCursorPositionAfterFormating(
+      previousStringBeforeCursor,
+      previousValue,
+      value
+    );
+
+    return {
+      cursorPosition,
+      value,
+    };
+  };
+
   changeHighlightCountry = (showDropdown, selectedIndex) => {
     this.setState({
       showDropdown,
@@ -1337,6 +1350,7 @@ IntlTelInputApp.propTypes = {
   useMobileFullscreenDropdown: PropTypes.bool,
   telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   format: PropTypes.bool,
+  formatFull: PropTypes.bool,
   onFlagClick: PropTypes.func,
 };
 
@@ -1388,6 +1402,7 @@ IntlTelInputApp.defaultProps = {
   telInputProps: {},
   // always format the number
   format: false,
+  formatFull: false,
   onFlagClick: null,
 };
 

src/example.js

@@ -31,23 +31,29 @@ class DemoComponent extends Component {
     this.state = {
       phone1: '',
       phone2: '',
+      phone3: '',
+      phoneNumber3: '',
     };
-    this.changePhone1 = this.changeHandler.bind(this, 'phone1');
-    this.changePhone2 = this.changeHandler.bind(this, 'phone2');
+    this.changePhone1 = this.changeHandler.bind(this, 'phone1', 'phoneNumber1');
+    this.changePhone2 = this.changeHandler.bind(this, 'phone2', 'phoneNumber2');
+    this.changePhone3 = this.changeHandler.bind(this, 'phone3', 'phoneNumber3');
     this.blurHandler1 = this.blurHandler.bind(this, 'phone1');
     this.blurHandler2 = this.blurHandler.bind(this, 'phone2');
+    this.blurHandler3 = this.blurHandler.bind(this, 'phone3');
     this.selectFlagHandler1 = this.selectFlagHandler.bind(this, 'phone1');
     this.selectFlagHandler2 = this.selectFlagHandler.bind(this, 'phone2');
+    this.selectFlagHandler3 = this.selectFlagHandler.bind(this, 'phone3');
   }
 
   blurHandler = (name, isValid, value, countryData, number, ext, event) => {
     log(isValid, value, countryData, number, ext, event.type);
   };
 
-  changeHandler(name, isValid, value, countryData, number, ext) {
+  changeHandler(name, nameNumber, isValid, value, countryData, number, ext) {
     log(isValid, value, countryData, number, ext);
     this.setState({
       [name]: value,
+      [nameNumber]: number,
     });
   }
 
@@ -90,11 +96,28 @@ class DemoComponent extends Component {
           value={this.state.phone2}
           css={['intl-tel-input', 'form-control']}
         />
+
         <div>
           Phone Number:
           {this.state.phone2}
         </div>
 
+        <IntlTelInput
+          onPhoneNumberChange={this.changePhone3}
+          onPhoneNumberBlur={this.blurHandler3}
+          onSelectFlag={this.selectFlagHandler3}
+          defaultCountry="auto"
+          value={this.state.phoneNumber3}
+          geoIpLookup={lookup}
+          css={['intl-tel-input', 'form-control']}
+          formatFull
+        />
+
+        <div>
+          Phone Number:
+          {this.state.phone3}
+        </div>
+
         <hr />
 
         <div