Update cursor pointer

TelInput.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class TelInput extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    readonly: PropTypes.bool,
+    fieldName: PropTypes.string,
+    fieldId: PropTypes.string,
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    handleInputChange: PropTypes.func,
+    handlePaste: PropTypes.func,
+    handleOnBlur: PropTypes.func,
+    autoFocus: PropTypes.bool,
+    autoComplete: PropTypes.string,
+    inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    refCallback: PropTypes.func.isRequired,
+    cursorPosition: PropTypes.number,
+  };
+
+  componentDidUpdate() {
+    this.tel.setSelectionRange(
+      this.props.cursorPosition,
+      this.props.cursorPosition
+    );
+  }
+
+  refHandler = element => {
+    this.tel = element;
+    this.props.refCallback(element);
+  };
+
+  handleBlur = e => {
+    if (typeof this.props.handleOnBlur === 'function') {
+      this.props.handleOnBlur(e);
+    }
+  };
+
+  handleFocus = () => { };
+
+  handlePaste = e => {
+    if (typeof this.props.handlePaste === 'function') {
+      this.props.handlePaste(e);
+    }
+  };
+
+  render() {
+    return (
+      <input
+        {...this.props.inputProps}
+        ref={this.refHandler}
+        type="tel"
+        autoComplete={this.props.autoComplete}
+        className={this.props.className}
+        disabled={this.props.disabled ? 'disabled' : false}
+        readOnly={this.props.readonly ? 'readonly' : false}
+        name={this.props.fieldName}
+        id={this.props.fieldId}
+        value={this.props.value}
+        placeholder={this.props.placeholder}
+        onChange={this.props.handleInputChange}
+        onPaste={this.handlePaste}
+        onBlur={this.handleBlur}
+        onFocus={this.handleFocus}
+        autoFocus={this.props.autoFocus}
+      />
+    );
+  }
+}

src/components/IntlTelInput.js

@@ -24,7 +24,7 @@ class IntlTelInput extends Component {
       };
     }
 
-    if (prevState.disabled !== nextProps.disabled) {
+    if (nextProps.disabled && prevState.disabled !== nextProps.disabled) {
       newState = {
         disabled: nextProps.disabled,
       };
@@ -80,7 +80,6 @@ class IntlTelInput extends Component {
       offsetTop: 0,
       outerHeight: 0,
       placeholder: '',
-      title: '', // eslint-disable-line react/no-unused-state
       countryCode: 'us',
       dialCode: '',
       cursorPosition: (props.value || props.defaultValue).length,
@@ -151,6 +150,9 @@ class IntlTelInput extends Component {
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
       this.updateFlagFromNumber(this.props.value);
+      this.updateCursorPosition(
+        (this.props.value || this.props.defaultValue).length
+      );
     }
 
     if (
@@ -159,10 +161,6 @@ class IntlTelInput extends Component {
     ) {
       this.updatePlaceholder(this.props);
     }
-
-    if (this.props.allowDropdown !== prevProps.allowDropdown) {
-      this.allowDropdown = this.props.allowDropdown;
-    }
   }
 
   componentWillUnmount() {
@@ -234,13 +232,6 @@ class IntlTelInput extends Component {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
 
-    // update the selected country's title attribute
-    const title = countryCode
-      ? `${this.selectedCountryData.name}: +${
-        this.selectedCountryData.dialCode
-      }`
-      : 'Unknown';
-
     let dialCode = this.state.dialCode; // eslint-disable-line react/no-access-state-in-setstate
 
     if (this.props.separateDialCode) {
@@ -290,7 +281,6 @@ class IntlTelInput extends Component {
         showDropdown: false,
         highlightedCountry: selectedIndex,
         countryCode,
-        title, // eslint-disable-line react/no-unused-state
         dialCode,
       },
       () => {
@@ -643,9 +633,7 @@ class IntlTelInput extends Component {
     for (let i = 0, max = this.countries.length; i < max; i++) {
       if (utils.startsWith(this.countries[i].name, query)) {
         const listItem = this.flagDropDown.querySelector(
-          `.country-list [data-country-code="${
-            this.countries[i].iso2
-          }"]:not(.preferred)`
+          `.country-list [data-country-code="${this.countries[i].iso2}"]:not(.preferred)`
         );
 
         const selectedIndex = utils.retrieveLiIndex(listItem);
@@ -684,14 +672,20 @@ class IntlTelInput extends Component {
     return number;
   };
 
+  updateCursorPosition = cursorPosition => {
+    this.setState({
+      cursorPosition,
+    });
+  };
+
   // update the input's value to the given val (format first if possible)
   // if doNotify is true, calls notifyPhoneNumberChange with the formatted value
   // NOTE: this is called from _setInitialState, handleUtils and setNumber
   updateValFromNumber = (number, doFormat, doNotify = false) => {
     if (doFormat && window.intlTelInputUtils && this.selectedCountryData) {
       const format =
         !this.props.separateDialCode &&
-        (this.nationalMode || number.charAt(0) !== '+')
+          (this.nationalMode || number.charAt(0) !== '+')
           ? window.intlTelInputUtils.numberFormat.NATIONAL
           : window.intlTelInputUtils.numberFormat.INTERNATIONAL;
 
@@ -999,6 +993,7 @@ class IntlTelInput extends Component {
   };
 
   generateMarkup = () => {
+    this.wrapperClass['allow-dropdown'] = this.allowDropdown;
     this.wrapperClass['separate-dial-code'] = this.props.separateDialCode;
 
     if (this.isMobile && this.props.useMobileFullscreenDropdown) {
@@ -1256,8 +1251,7 @@ class IntlTelInput extends Component {
     const wrapperClass = classNames(this.wrapperClass);
 
     const titleTip = this.selectedCountryData
-      ? `${this.selectedCountryData.name}: +${
-        this.selectedCountryData.dialCode
+      ? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode
       }`
       : 'Unknown';
 

src/components/TelInput.js

@@ -20,17 +20,11 @@ export default class TelInput extends Component {
     cursorPosition: PropTypes.number,
   };
 
-  state = {
-    hasFocus: false,
-  };
-
   componentDidUpdate() {
-    if (this.state.hasFocus) {
-      this.tel.setSelectionRange(
-        this.props.cursorPosition,
-        this.props.cursorPosition
-      );
-    }
+    this.tel.setSelectionRange(
+      this.props.cursorPosition,
+      this.props.cursorPosition
+    );
   }
 
   refHandler = element => {
@@ -39,16 +33,12 @@ export default class TelInput extends Component {
   };
 
   handleBlur = e => {
-    this.setState({ hasFocus: false });
-
     if (typeof this.props.handleOnBlur === 'function') {
       this.props.handleOnBlur(e);
     }
   };
 
-  handleFocus = () => {
-    this.setState({ hasFocus: true });
-  };
+  handleFocus = () => {};
 
   handlePaste = e => {
     if (typeof this.props.handlePaste === 'function') {