react-telephone-input - npm Package Compare versions

Comparing version 4.6.10 to 4.7.10

es/ReactTelephoneInput.js

@@ -19,3 +19,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -122,2 +121,4 @@ import countryData from 'country-telephone-data';
   ReactTelephoneInput.prototype.render = function render() {
+    var _this2 = this;
+
     var arrowClasses = classNames({
@@ -153,3 +154,5 @@ arrow: true,
         value: this.state.formattedNumber,
-        ref: 'numberInput',
+        ref: function ref(node) {
+          _this2.numberInputRef = node;
+        },
         type: 'tel',
@@ -165,7 +168,6 @@ className: inputClasses,
         'div',
-        { ref: 'flagDropDownButton', className: flagViewClasses, onKeyDown: this.handleKeydown },
+        { className: flagViewClasses, onKeyDown: this.handleKeydown },
         React.createElement(
           'div',
           {
-            ref: 'selectedFlag',
             onClick: this.handleFlagDropdownClick,
@@ -207,57 +209,18 @@ className: 'selected-flag',
 }, _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
+  var _this3 = this;
 
+  this.numberInputRef = null;
+
   this.getNumber = function () {
-    return _this2.state.formattedNumber !== '+' ? _this2.state.formattedNumber : '';
+    return _this3.state.formattedNumber !== '+' ? _this3.state.formattedNumber : '';
   };
 
   this.getValue = function () {
-    return _this2.getNumber();
+    return _this3.getNumber();
   };
 
-  this.scrollTo = function (country, middle) {
-    if (!country) {
-      return;
-    }
-
-    var container = ReactDOM.findDOMNode(_this2.refs.flagDropdownList);
-
-    if (!container) {
-      return;
-    }
-
-    var containerHeight = container.offsetHeight;
-    var containerOffset = container.getBoundingClientRect();
-    var containerTop = containerOffset.top + document.body.scrollTop;
-    var containerBottom = containerTop + containerHeight;
-
-    var element = country;
-    var elementOffset = element.getBoundingClientRect();
-
-    var elementHeight = element.offsetHeight;
-    var elementTop = elementOffset.top + document.body.scrollTop;
-    var elementBottom = elementTop + elementHeight;
-    var newScrollTop = elementTop - (containerTop + container.scrollTop);
-    var middleOffset = containerHeight / 2 - elementHeight / 2;
-
-    if (elementTop < containerTop) {
-      // scroll up
-      if (middle) {
-        newScrollTop -= middleOffset;
-      }
-      container.scrollTop = newScrollTop;
-    } else if (elementBottom > containerBottom) {
-      // scroll down
-      if (middle) {
-        newScrollTop += middleOffset;
-      }
-      var heightDifference = containerHeight - elementHeight;
-      container.scrollTop = newScrollTop - heightDifference;
-    }
-  };
-
   this._cursorToEnd = function (skipFocus) {
-    var input = _this2.refs.numberInput;
+    var input = _this3.numberInputRef;
     if (skipFocus) {
-      _this2._fillDialCode();
+      _this3._fillDialCode();
     } else {
@@ -274,3 +237,3 @@ input.focus();
   this.guessSelectedCountry = function (inputNumber) {
-    var _props = _this2.props,
+    var _props = _this3.props,
         defaultCountry = _props.defaultCountry,
@@ -280,3 +243,3 @@ onlyCountries = _props.onlyCountries;
 
-    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this2.props.onlyCountries[0];
+    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this3.props.onlyCountries[0];
 
@@ -309,3 +272,3 @@ var inputNumberForCountries = inputNumber.substr(0, 4);
         return selectedCountry;
-      }, { dialCode: '', priority: 10001 }, _this2);
+      }, { dialCode: '', priority: 10001 }, _this3);
     } else {
@@ -322,8 +285,4 @@ return secondBestGuess;
 
-  this.getElement = function (index) {
-    return ReactDOM.findDOMNode(_this2.refs['flag_no_' + index]);
-  };
-
   this.handleFlagDropdownClick = function (e) {
-    if (_this2.props.disabled) {
+    if (_this3.props.disabled) {
       return;
@@ -333,18 +292,13 @@ }
     e.preventDefault();
-    var _state = _this2.state,
+    var _state = _this3.state,
         preferredCountries = _state.preferredCountries,
         selectedCountry = _state.selectedCountry;
-    var onlyCountries = _this2.props.onlyCountries;
+    var onlyCountries = _this3.props.onlyCountries;
 
     // need to put the highlight on the current selected country if the dropdown is going to open up
 
-    _this2.setState({
-      showDropDown: !_this2.state.showDropDown,
-      highlightCountry: find(equals(_this2.state.selectedCountry), _this2.props.onlyCountries),
+    _this3.setState({
+      showDropDown: !_this3.state.showDropDown,
+      highlightCountry: find(equals(_this3.state.selectedCountry), _this3.props.onlyCountries),
       highlightCountryIndex: findIndex(propEq('iso2', selectedCountry.iso2), preferredCountries.concat(onlyCountries))
-    }, function () {
-      // only need to scrool if the dropdown list is alive
-      if (_this2.state.showDropDown) {
-        _this2.scrollTo(_this2.getElement(_this2.state.highlightCountryIndex + _this2.state.preferredCountries.length));
-      }
     });
@@ -355,8 +309,8 @@ };
     var formattedNumber = '+';
-    var newSelectedCountry = _this2.state.selectedCountry;
-    var freezeSelection = _this2.state.freezeSelection;
+    var newSelectedCountry = _this3.state.selectedCountry;
+    var freezeSelection = _this3.state.freezeSelection;
 
     // if the input is the same as before, must be some special key like enter etc.
 
-    if (event.target.value === _this2.state.formattedNumber) {
+    if (event.target.value === _this3.state.formattedNumber) {
       return;
@@ -369,3 +323,3 @@ }
     } else {
-      event.returnValue = false;
+      event.returnValue = false; // eslint-disable-line no-param-reassign
     }
@@ -382,16 +336,16 @@
       // since the set of input it gets has drastically reduced
-      if (!_this2.state.freezeSelection || _this2.state.selectedCountry.dialCode.length > inputNumber.length) {
-        newSelectedCountry = _this2.guessSelectedCountry(inputNumber.substring(0, 6));
+      if (!_this3.state.freezeSelection || _this3.state.selectedCountry.dialCode.length > inputNumber.length) {
+        newSelectedCountry = _this3.guessSelectedCountry(inputNumber.substring(0, 6));
         freezeSelection = false;
       }
       // let us remove all non numerals from the input
-      formattedNumber = formatNumber(inputNumber, newSelectedCountry.format, _this2.props.autoFormat);
+      formattedNumber = formatNumber(inputNumber, newSelectedCountry.format, _this3.props.autoFormat);
     }
 
     var caretPosition = event.target.selectionStart;
-    var oldFormattedText = _this2.state.formattedNumber;
+    var oldFormattedText = _this3.state.formattedNumber;
     var diff = formattedNumber.length - oldFormattedText.length;
-    var selectedCountry = newSelectedCountry.dialCode.length > 0 ? newSelectedCountry : _this2.state.selectedCountry;
+    var selectedCountry = newSelectedCountry.dialCode.length > 0 ? newSelectedCountry : _this3.state.selectedCountry;
 
-    _this2.setState({
+    _this3.setState({
       formattedNumber: formattedNumber,
@@ -411,8 +365,10 @@ freezeSelection: freezeSelection,
         if (caretPosition > 0 && oldFormattedText.length >= formattedNumber.length) {
-          _this2.refs.numberInput.setSelectionRange(caretPosition, caretPosition);
+          if (_this3.numberInputRef) {
+            _this3.numberInputRef.setSelectionRange(caretPosition, caretPosition);
+          }
         }
       }
 
-      if (_this2.props.onChange) {
-        _this2.props.onChange(formattedNumber, selectedCountry);
+      if (_this3.props.onChange) {
+        _this3.props.onChange(formattedNumber, selectedCountry);
       }
@@ -423,17 +379,17 @@ });
   this.handleInputClick = function () {
-    _this2.setState({ showDropDown: false });
+    _this3.setState({ showDropDown: false });
   };
 
   this.handleFlagItemClick = function (country) {
-    var currentSelectedCountry = _this2.state.selectedCountry;
-    var nextSelectedCountry = find(equals(country), _this2.props.onlyCountries);
+    var currentSelectedCountry = _this3.state.selectedCountry;
+    var nextSelectedCountry = find(equals(country), _this3.props.onlyCountries);
 
     // tiny optimization
     if (currentSelectedCountry.iso2 !== nextSelectedCountry.iso2) {
-      var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, _this2.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
+      var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, _this3.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
       );
 
-      var formattedNumber = formatNumber(newNumber, nextSelectedCountry.format, _this2.props.autoFormat);
+      var formattedNumber = formatNumber(newNumber, nextSelectedCountry.format, _this3.props.autoFormat);
 
-      _this2.setState({
+      _this3.setState({
         showDropDown: false,
@@ -444,9 +400,9 @@ selectedCountry: nextSelectedCountry,
       }, function () {
-        _this2._cursorToEnd();
-        if (_this2.props.onChange) {
-          _this2.props.onChange(formattedNumber, nextSelectedCountry);
+        _this3._cursorToEnd();
+        if (_this3.props.onChange) {
+          _this3.props.onChange(formattedNumber, nextSelectedCountry);
         }
       });
     } else {
-      _this2.setState({ showDropDown: false });
+      _this3.setState({ showDropDown: false });
     }
@@ -457,7 +413,7 @@ };
     // trigger parent component's onFocus handler
-    if (typeof _this2.props.onFocus === 'function') {
-      _this2.props.onFocus(_this2.state.formattedNumber, _this2.state.selectedCountry);
+    if (typeof _this3.props.onFocus === 'function') {
+      _this3.props.onFocus(_this3.state.formattedNumber, _this3.state.selectedCountry);
     }
 
-    _this2._fillDialCode();
+    _this3._fillDialCode();
   };
@@ -474,7 +430,7 @@
       inputNumber = props.initialValue;
-    } else if (_this2.props.value) {
+    } else if (_this3.props.value) {
       // just clear the value
       inputNumber = '';
-    } else if (_this2.state && _this2.state.formattedNumber && _this2.state.formattedNumber.length > 0) {
-      inputNumber = _this2.state.formattedNumber;
+    } else if (_this3.state && _this3.state.formattedNumber && _this3.state.formattedNumber.length > 0) {
+      inputNumber = _this3.state.formattedNumber;
     } else {
@@ -484,5 +440,5 @@ inputNumber = '';
 
-    var selectedCountryGuess = _this2.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
+    var selectedCountryGuess = _this3.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
     var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
-    var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this2.props.autoFormat);
+    var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this3.props.autoFormat);
 
@@ -498,5 +454,5 @@ return {
     // if the input is blank, insert dial code of the selected country
-    if (_this2.refs.numberInput && _this2.refs.numberInput.value === '+') {
-      _this2.setState({
-        formattedNumber: '+' + _this2.state.selectedCountry.dialCode
+    if (_this3.numberInputRef && _this3.numberInputRef.value === '+') {
+      _this3.setState({
+        formattedNumber: '+' + _this3.state.selectedCountry.dialCode
       });
@@ -508,5 +464,5 @@ }
     // had to write own function because underscore does not have findIndex. lodash has it
-    var highlightCountryIndex = _this2.state.highlightCountryIndex + direction;
+    var highlightCountryIndex = _this3.state.highlightCountryIndex + direction;
 
-    if (highlightCountryIndex < 0 || highlightCountryIndex >= _this2.props.onlyCountries.length + _this2.state.preferredCountries.length) {
+    if (highlightCountryIndex < 0 || highlightCountryIndex >= _this3.props.onlyCountries.length + _this3.state.preferredCountries.length) {
       return highlightCountryIndex - direction;
@@ -530,7 +486,6 @@ }
   this.searchCountry = function () {
-    var probableCandidate = _this2._searchCountry(_this2.state.queryString) || _this2.props.onlyCountries[0];
-    var probableCandidateIndex = findIndex(propEq('iso2', probableCandidate.iso2), _this2.props.onlyCountries) + _this2.state.preferredCountries.length;
-    _this2.scrollTo(_this2.getElement(probableCandidateIndex), true);
+    var probableCandidate = _this3._searchCountry(_this3.state.queryString) || _this3.props.onlyCountries[0];
+    var probableCandidateIndex = findIndex(propEq('iso2', probableCandidate.iso2), _this3.props.onlyCountries) + _this3.state.preferredCountries.length;
 
-    _this2.setState({
+    _this3.setState({
       queryString: '',
@@ -542,3 +497,3 @@ highlightCountryIndex: probableCandidateIndex
   this.handleKeydown = function (event) {
-    if (!_this2.state.showDropDown || event.metaKey || event.altKey) {
+    if (!_this3.state.showDropDown || event.metaKey || event.altKey) {
       return;
@@ -551,11 +506,9 @@ }
     } else {
-      event.returnValue = false;
+      event.returnValue = false; // eslint-disable-line no-param-reassign
     }
 
-    var self = _this2;
+    var self = _this3;
     function _moveHighlight(direction) {
       self.setState({
         highlightCountryIndex: self._getHighlightCountryIndex(direction)
-      }, function () {
-        self.scrollTo(self.getElement(self.state.highlightCountryIndex), true);
       });
@@ -572,12 +525,12 @@ }
       case keys.ENTER:
-        _this2.handleFlagItemClick(_this2.state.preferredCountries.concat(_this2.props.onlyCountries)[_this2.state.highlightCountryIndex], event);
+        _this3.handleFlagItemClick(_this3.state.preferredCountries.concat(_this3.props.onlyCountries)[_this3.state.highlightCountryIndex], event);
         break;
       case keys.ESC:
-        _this2.setState({ showDropDown: false }, _this2._cursorToEnd);
+        _this3.setState({ showDropDown: false }, _this3._cursorToEnd);
         break;
       default:
         if (event.which >= keys.A && event.which <= keys.Z || event.which === keys.SPACE) {
-          _this2.setState({
-            queryString: _this2.state.queryString + String.fromCharCode(event.which)
-          }, _this2.state.debouncedQueryStingSearcher);
+          _this3.setState({
+            queryString: _this3.state.queryString + String.fromCharCode(event.which)
+          }, _this3.state.debouncedQueryStingSearcher);
         }
@@ -589,3 +542,3 @@ }
     if (event.which === keys.ENTER) {
-      _this2.props.onEnterKeyPress(event);
+      _this3.props.onEnterKeyPress(event);
     }
@@ -595,4 +548,4 @@ };
   this.handleClickOutside = function () {
-    if (_this2.state.showDropDown) {
-      _this2.setState({
+    if (_this3.state.showDropDown) {
+      _this3.setState({
         showDropDown: false
@@ -604,3 +557,3 @@ });
   this.getCountryDropDownList = function () {
-    var data = _this2.state.preferredCountries.concat(_this2.props.onlyCountries);
+    var data = _this3.state.preferredCountries.concat(_this3.props.onlyCountries);
 
@@ -612,5 +565,5 @@ return React.createElement(VirtualList, {
       itemSize: 40,
-      style: _this2.props.listStyle,
+      style: _this3.props.listStyle,
       className: 'country-list',
-      scrollToIndex: _this2.state.highlightCountryIndex,
+      scrollToIndex: _this3.state.highlightCountryIndex,
       scrollToAlignment: 'center',
@@ -622,5 +575,5 @@ renderItem: function renderItem(_ref) {
         var country = data[index];
-        var itemClasses = classNames(_this2.props.listItemClassName, {
-          preferred: findIndex(propEq('iso2', country.iso2), _this2.state.preferredCountries) >= 0,
-          highlight: _this2.state.highlightCountryIndex === index
+        var itemClasses = classNames(_this3.props.listItemClassName, {
+          preferred: findIndex(propEq('iso2', country.iso2), _this3.state.preferredCountries) >= 0,
+          highlight: _this3.state.highlightCountryIndex === index
         });
@@ -633,3 +586,2 @@
           {
-            ref: 'flag_no_' + index,
             key: 'flag_no_' + index,
@@ -640,7 +592,7 @@ 'data-flag-key': 'flag_no_' + index,
             'data-country-code': country.iso2,
-            onClick: _this2.handleFlagItemClick.bind(_this2, country),
+            onClick: _this3.handleFlagItemClick.bind(_this3, country),
             style: style,
             title: country.name + ' - ' + country.dialCode
           },
-          React.createElement('div', { className: inputFlagClasses, style: _this2.getFlagStyle() }),
+          React.createElement('div', { className: inputFlagClasses, style: _this3.getFlagStyle() }),
           React.createElement(
@@ -662,5 +614,5 @@ 'span',
   this.getFlagStyle = function () {
-    if (_this2.props.flagsImagePath) {
+    if (_this3.props.flagsImagePath) {
       return {
-        backgroundImage: 'url(' + _this2.props.flagsImagePath + ')'
+        backgroundImage: 'url(' + _this3.props.flagsImagePath + ')'
       };
@@ -672,4 +624,4 @@ }
   this.handleInputBlur = function () {
-    if (typeof _this2.props.onBlur === 'function') {
-      _this2.props.onBlur(_this2.state.formattedNumber, _this2.state.selectedCountry);
+    if (typeof _this3.props.onBlur === 'function') {
+      _this3.props.onBlur(_this3.state.formattedNumber, _this3.state.selectedCountry);
     }
@@ -676,0 +628,0 @@ };

lib/ReactTelephoneInput.js

@@ -34,6 +34,2 @@ 'use strict';
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _classnames = require('classnames');
@@ -162,2 +158,4 @@
   ReactTelephoneInput.prototype.render = function render() {
+    var _this2 = this;
+
     var arrowClasses = (0, _classnames2.default)({
@@ -193,3 +191,5 @@ arrow: true,
         value: this.state.formattedNumber,
-        ref: 'numberInput',
+        ref: function ref(node) {
+          _this2.numberInputRef = node;
+        },
         type: 'tel',
@@ -205,7 +205,6 @@ className: inputClasses,
         'div',
-        { ref: 'flagDropDownButton', className: flagViewClasses, onKeyDown: this.handleKeydown },
+        { className: flagViewClasses, onKeyDown: this.handleKeydown },
         _react2.default.createElement(
           'div',
           {
-            ref: 'selectedFlag',
             onClick: this.handleFlagDropdownClick,
@@ -247,57 +246,18 @@ className: 'selected-flag',
 }, _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
+  var _this3 = this;
 
+  this.numberInputRef = null;
+
   this.getNumber = function () {
-    return _this2.state.formattedNumber !== '+' ? _this2.state.formattedNumber : '';
+    return _this3.state.formattedNumber !== '+' ? _this3.state.formattedNumber : '';
   };
 
   this.getValue = function () {
-    return _this2.getNumber();
+    return _this3.getNumber();
   };
 
-  this.scrollTo = function (country, middle) {
-    if (!country) {
-      return;
-    }
-
-    var container = _reactDom2.default.findDOMNode(_this2.refs.flagDropdownList);
-
-    if (!container) {
-      return;
-    }
-
-    var containerHeight = container.offsetHeight;
-    var containerOffset = container.getBoundingClientRect();
-    var containerTop = containerOffset.top + document.body.scrollTop;
-    var containerBottom = containerTop + containerHeight;
-
-    var element = country;
-    var elementOffset = element.getBoundingClientRect();
-
-    var elementHeight = element.offsetHeight;
-    var elementTop = elementOffset.top + document.body.scrollTop;
-    var elementBottom = elementTop + elementHeight;
-    var newScrollTop = elementTop - (containerTop + container.scrollTop);
-    var middleOffset = containerHeight / 2 - elementHeight / 2;
-
-    if (elementTop < containerTop) {
-      // scroll up
-      if (middle) {
-        newScrollTop -= middleOffset;
-      }
-      container.scrollTop = newScrollTop;
-    } else if (elementBottom > containerBottom) {
-      // scroll down
-      if (middle) {
-        newScrollTop += middleOffset;
-      }
-      var heightDifference = containerHeight - elementHeight;
-      container.scrollTop = newScrollTop - heightDifference;
-    }
-  };
-
   this._cursorToEnd = function (skipFocus) {
-    var input = _this2.refs.numberInput;
+    var input = _this3.numberInputRef;
     if (skipFocus) {
-      _this2._fillDialCode();
+      _this3._fillDialCode();
     } else {
@@ -314,3 +274,3 @@ input.focus();
   this.guessSelectedCountry = function (inputNumber) {
-    var _props = _this2.props,
+    var _props = _this3.props,
         defaultCountry = _props.defaultCountry,
@@ -320,3 +280,3 @@ onlyCountries = _props.onlyCountries;
 
-    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this2.props.onlyCountries[0];
+    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this3.props.onlyCountries[0];
 
@@ -349,3 +309,3 @@ var inputNumberForCountries = inputNumber.substr(0, 4);
         return selectedCountry;
-      }, { dialCode: '', priority: 10001 }, _this2);
+      }, { dialCode: '', priority: 10001 }, _this3);
     } else {
@@ -362,8 +322,4 @@ return secondBestGuess;
 
-  this.getElement = function (index) {
-    return _reactDom2.default.findDOMNode(_this2.refs['flag_no_' + index]);
-  };
-
   this.handleFlagDropdownClick = function (e) {
-    if (_this2.props.disabled) {
+    if (_this3.props.disabled) {
       return;
@@ -373,18 +329,13 @@ }
     e.preventDefault();
-    var _state = _this2.state,
+    var _state = _this3.state,
         preferredCountries = _state.preferredCountries,
         selectedCountry = _state.selectedCountry;
-    var onlyCountries = _this2.props.onlyCountries;
+    var onlyCountries = _this3.props.onlyCountries;
 
     // need to put the highlight on the current selected country if the dropdown is going to open up
 
-    _this2.setState({
-      showDropDown: !_this2.state.showDropDown,
-      highlightCountry: find(equals(_this2.state.selectedCountry), _this2.props.onlyCountries),
+    _this3.setState({
+      showDropDown: !_this3.state.showDropDown,
+      highlightCountry: find(equals(_this3.state.selectedCountry), _this3.props.onlyCountries),
       highlightCountryIndex: findIndex(propEq('iso2', selectedCountry.iso2), preferredCountries.concat(onlyCountries))
-    }, function () {
-      // only need to scrool if the dropdown list is alive
-      if (_this2.state.showDropDown) {
-        _this2.scrollTo(_this2.getElement(_this2.state.highlightCountryIndex + _this2.state.preferredCountries.length));
-      }
     });
@@ -395,8 +346,8 @@ };
     var formattedNumber = '+';
-    var newSelectedCountry = _this2.state.selectedCountry;
-    var freezeSelection = _this2.state.freezeSelection;
+    var newSelectedCountry = _this3.state.selectedCountry;
+    var freezeSelection = _this3.state.freezeSelection;
 
     // if the input is the same as before, must be some special key like enter etc.
 
-    if (event.target.value === _this2.state.formattedNumber) {
+    if (event.target.value === _this3.state.formattedNumber) {
       return;
@@ -409,3 +360,3 @@ }
     } else {
-      event.returnValue = false;
+      event.returnValue = false; // eslint-disable-line no-param-reassign
     }
@@ -422,16 +373,16 @@
       // since the set of input it gets has drastically reduced
-      if (!_this2.state.freezeSelection || _this2.state.selectedCountry.dialCode.length > inputNumber.length) {
-        newSelectedCountry = _this2.guessSelectedCountry(inputNumber.substring(0, 6));
+      if (!_this3.state.freezeSelection || _this3.state.selectedCountry.dialCode.length > inputNumber.length) {
+        newSelectedCountry = _this3.guessSelectedCountry(inputNumber.substring(0, 6));
         freezeSelection = false;
       }
       // let us remove all non numerals from the input
-      formattedNumber = (0, _format_number2.default)(inputNumber, newSelectedCountry.format, _this2.props.autoFormat);
+      formattedNumber = (0, _format_number2.default)(inputNumber, newSelectedCountry.format, _this3.props.autoFormat);
     }
 
     var caretPosition = event.target.selectionStart;
-    var oldFormattedText = _this2.state.formattedNumber;
+    var oldFormattedText = _this3.state.formattedNumber;
     var diff = formattedNumber.length - oldFormattedText.length;
-    var selectedCountry = newSelectedCountry.dialCode.length > 0 ? newSelectedCountry : _this2.state.selectedCountry;
+    var selectedCountry = newSelectedCountry.dialCode.length > 0 ? newSelectedCountry : _this3.state.selectedCountry;
 
-    _this2.setState({
+    _this3.setState({
       formattedNumber: formattedNumber,
@@ -451,8 +402,10 @@ freezeSelection: freezeSelection,
         if (caretPosition > 0 && oldFormattedText.length >= formattedNumber.length) {
-          _this2.refs.numberInput.setSelectionRange(caretPosition, caretPosition);
+          if (_this3.numberInputRef) {
+            _this3.numberInputRef.setSelectionRange(caretPosition, caretPosition);
+          }
         }
       }
 
-      if (_this2.props.onChange) {
-        _this2.props.onChange(formattedNumber, selectedCountry);
+      if (_this3.props.onChange) {
+        _this3.props.onChange(formattedNumber, selectedCountry);
       }
@@ -463,17 +416,17 @@ });
   this.handleInputClick = function () {
-    _this2.setState({ showDropDown: false });
+    _this3.setState({ showDropDown: false });
   };
 
   this.handleFlagItemClick = function (country) {
-    var currentSelectedCountry = _this2.state.selectedCountry;
-    var nextSelectedCountry = find(equals(country), _this2.props.onlyCountries);
+    var currentSelectedCountry = _this3.state.selectedCountry;
+    var nextSelectedCountry = find(equals(country), _this3.props.onlyCountries);
 
     // tiny optimization
     if (currentSelectedCountry.iso2 !== nextSelectedCountry.iso2) {
-      var newNumber = (0, _replace_country_code2.default)(currentSelectedCountry, nextSelectedCountry, _this2.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
+      var newNumber = (0, _replace_country_code2.default)(currentSelectedCountry, nextSelectedCountry, _this3.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
       );
 
-      var formattedNumber = (0, _format_number2.default)(newNumber, nextSelectedCountry.format, _this2.props.autoFormat);
+      var formattedNumber = (0, _format_number2.default)(newNumber, nextSelectedCountry.format, _this3.props.autoFormat);
 
-      _this2.setState({
+      _this3.setState({
         showDropDown: false,
@@ -484,9 +437,9 @@ selectedCountry: nextSelectedCountry,
       }, function () {
-        _this2._cursorToEnd();
-        if (_this2.props.onChange) {
-          _this2.props.onChange(formattedNumber, nextSelectedCountry);
+        _this3._cursorToEnd();
+        if (_this3.props.onChange) {
+          _this3.props.onChange(formattedNumber, nextSelectedCountry);
         }
       });
     } else {
-      _this2.setState({ showDropDown: false });
+      _this3.setState({ showDropDown: false });
     }
@@ -497,7 +450,7 @@ };
     // trigger parent component's onFocus handler
-    if (typeof _this2.props.onFocus === 'function') {
-      _this2.props.onFocus(_this2.state.formattedNumber, _this2.state.selectedCountry);
+    if (typeof _this3.props.onFocus === 'function') {
+      _this3.props.onFocus(_this3.state.formattedNumber, _this3.state.selectedCountry);
     }
 
-    _this2._fillDialCode();
+    _this3._fillDialCode();
   };
@@ -514,7 +467,7 @@
       inputNumber = props.initialValue;
-    } else if (_this2.props.value) {
+    } else if (_this3.props.value) {
       // just clear the value
       inputNumber = '';
-    } else if (_this2.state && _this2.state.formattedNumber && _this2.state.formattedNumber.length > 0) {
-      inputNumber = _this2.state.formattedNumber;
+    } else if (_this3.state && _this3.state.formattedNumber && _this3.state.formattedNumber.length > 0) {
+      inputNumber = _this3.state.formattedNumber;
     } else {
@@ -524,5 +477,5 @@ inputNumber = '';
 
-    var selectedCountryGuess = _this2.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
+    var selectedCountryGuess = _this3.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
     var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
-    var formattedNumber = (0, _format_number2.default)(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this2.props.autoFormat);
+    var formattedNumber = (0, _format_number2.default)(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this3.props.autoFormat);
 
@@ -538,5 +491,5 @@ return {
     // if the input is blank, insert dial code of the selected country
-    if (_this2.refs.numberInput && _this2.refs.numberInput.value === '+') {
-      _this2.setState({
-        formattedNumber: '+' + _this2.state.selectedCountry.dialCode
+    if (_this3.numberInputRef && _this3.numberInputRef.value === '+') {
+      _this3.setState({
+        formattedNumber: '+' + _this3.state.selectedCountry.dialCode
       });
@@ -548,5 +501,5 @@ }
     // had to write own function because underscore does not have findIndex. lodash has it
-    var highlightCountryIndex = _this2.state.highlightCountryIndex + direction;
+    var highlightCountryIndex = _this3.state.highlightCountryIndex + direction;
 
-    if (highlightCountryIndex < 0 || highlightCountryIndex >= _this2.props.onlyCountries.length + _this2.state.preferredCountries.length) {
+    if (highlightCountryIndex < 0 || highlightCountryIndex >= _this3.props.onlyCountries.length + _this3.state.preferredCountries.length) {
       return highlightCountryIndex - direction;
@@ -570,7 +523,6 @@ }
   this.searchCountry = function () {
-    var probableCandidate = _this2._searchCountry(_this2.state.queryString) || _this2.props.onlyCountries[0];
-    var probableCandidateIndex = findIndex(propEq('iso2', probableCandidate.iso2), _this2.props.onlyCountries) + _this2.state.preferredCountries.length;
-    _this2.scrollTo(_this2.getElement(probableCandidateIndex), true);
+    var probableCandidate = _this3._searchCountry(_this3.state.queryString) || _this3.props.onlyCountries[0];
+    var probableCandidateIndex = findIndex(propEq('iso2', probableCandidate.iso2), _this3.props.onlyCountries) + _this3.state.preferredCountries.length;
 
-    _this2.setState({
+    _this3.setState({
       queryString: '',
@@ -582,3 +534,3 @@ highlightCountryIndex: probableCandidateIndex
   this.handleKeydown = function (event) {
-    if (!_this2.state.showDropDown || event.metaKey || event.altKey) {
+    if (!_this3.state.showDropDown || event.metaKey || event.altKey) {
       return;
@@ -591,11 +543,9 @@ }
     } else {
-      event.returnValue = false;
+      event.returnValue = false; // eslint-disable-line no-param-reassign
     }
 
-    var self = _this2;
+    var self = _this3;
     function _moveHighlight(direction) {
       self.setState({
         highlightCountryIndex: self._getHighlightCountryIndex(direction)
-      }, function () {
-        self.scrollTo(self.getElement(self.state.highlightCountryIndex), true);
       });
@@ -612,12 +562,12 @@ }
       case keys.ENTER:
-        _this2.handleFlagItemClick(_this2.state.preferredCountries.concat(_this2.props.onlyCountries)[_this2.state.highlightCountryIndex], event);
+        _this3.handleFlagItemClick(_this3.state.preferredCountries.concat(_this3.props.onlyCountries)[_this3.state.highlightCountryIndex], event);
         break;
       case keys.ESC:
-        _this2.setState({ showDropDown: false }, _this2._cursorToEnd);
+        _this3.setState({ showDropDown: false }, _this3._cursorToEnd);
         break;
       default:
         if (event.which >= keys.A && event.which <= keys.Z || event.which === keys.SPACE) {
-          _this2.setState({
-            queryString: _this2.state.queryString + String.fromCharCode(event.which)
-          }, _this2.state.debouncedQueryStingSearcher);
+          _this3.setState({
+            queryString: _this3.state.queryString + String.fromCharCode(event.which)
+          }, _this3.state.debouncedQueryStingSearcher);
         }
@@ -629,3 +579,3 @@ }
     if (event.which === keys.ENTER) {
-      _this2.props.onEnterKeyPress(event);
+      _this3.props.onEnterKeyPress(event);
     }
@@ -635,4 +585,4 @@ };
   this.handleClickOutside = function () {
-    if (_this2.state.showDropDown) {
-      _this2.setState({
+    if (_this3.state.showDropDown) {
+      _this3.setState({
         showDropDown: false
@@ -644,3 +594,3 @@ });
   this.getCountryDropDownList = function () {
-    var data = _this2.state.preferredCountries.concat(_this2.props.onlyCountries);
+    var data = _this3.state.preferredCountries.concat(_this3.props.onlyCountries);
 
@@ -652,5 +602,5 @@ return _react2.default.createElement(_reactTinyVirtualList2.default, {
       itemSize: 40,
-      style: _this2.props.listStyle,
+      style: _this3.props.listStyle,
       className: 'country-list',
-      scrollToIndex: _this2.state.highlightCountryIndex,
+      scrollToIndex: _this3.state.highlightCountryIndex,
       scrollToAlignment: 'center',
@@ -662,5 +612,5 @@ renderItem: function renderItem(_ref) {
         var country = data[index];
-        var itemClasses = (0, _classnames2.default)(_this2.props.listItemClassName, {
-          preferred: findIndex(propEq('iso2', country.iso2), _this2.state.preferredCountries) >= 0,
-          highlight: _this2.state.highlightCountryIndex === index
+        var itemClasses = (0, _classnames2.default)(_this3.props.listItemClassName, {
+          preferred: findIndex(propEq('iso2', country.iso2), _this3.state.preferredCountries) >= 0,
+          highlight: _this3.state.highlightCountryIndex === index
         });
@@ -673,3 +623,2 @@
           {
-            ref: 'flag_no_' + index,
             key: 'flag_no_' + index,
@@ -680,7 +629,7 @@ 'data-flag-key': 'flag_no_' + index,
             'data-country-code': country.iso2,
-            onClick: _this2.handleFlagItemClick.bind(_this2, country),
+            onClick: _this3.handleFlagItemClick.bind(_this3, country),
             style: style,
             title: country.name + ' - ' + country.dialCode
           },
-          _react2.default.createElement('div', { className: inputFlagClasses, style: _this2.getFlagStyle() }),
+          _react2.default.createElement('div', { className: inputFlagClasses, style: _this3.getFlagStyle() }),
           _react2.default.createElement(
@@ -702,5 +651,5 @@ 'span',
   this.getFlagStyle = function () {
-    if (_this2.props.flagsImagePath) {
+    if (_this3.props.flagsImagePath) {
       return {
-        backgroundImage: 'url(' + _this2.props.flagsImagePath + ')'
+        backgroundImage: 'url(' + _this3.props.flagsImagePath + ')'
       };
@@ -712,4 +661,4 @@ }
   this.handleInputBlur = function () {
-    if (typeof _this2.props.onBlur === 'function') {
-      _this2.props.onBlur(_this2.state.formattedNumber, _this2.state.selectedCountry);
+    if (typeof _this3.props.onBlur === 'function') {
+      _this3.props.onBlur(_this3.state.formattedNumber, _this3.state.selectedCountry);
     }
@@ -716,0 +665,0 @@ };

package.json

 {
   "name": "react-telephone-input",
-  "version": "4.6.10",
+  "version": "4.7.10",
   "description": "React component for entering and validating international telephone numbers",
@@ -73,4 +73,3 @@ "main": "lib/ReactTelephoneInput.js",
   "peerDependencies": {
-    "react": ">=0.14.0 || ^15.0.0 || ^16.0.0",
-    "react-dom": ">=0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": ">=0.14.0 || ^15.0.0 || ^16.0.0"
   },
@@ -77,0 +76,0 @@ "browserify-shim": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

8

decreased by-11.11%

Worsened metrics

Total package byte prevSize

74960

decreased by-4.48%

Lines of code

2012

decreased by-4.05%

No dependency changes