intl-tel-input 19.2.16 → 19.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -34,7 +34,7 @@ You can view [a live demo](https://intl-tel-input.com) and see some examples of
34
34
 
35
35
 
36
36
  ## Mobile
37
- By default, on mobile devices we show a fullscreen popup instead of the inline dropdown, to make better use of the limited screen space. This is similar to how a native `<select>` element works. You can control this behaviour with the `useFullscreenPopup` option.
37
+ By default, on mobile devices we show a fullscreen popup instead of the inline dropdown, to make better use of the limited screen space. This is similar to how a native `<select>` element works. You can control this behaviour with the `useFullscreenPopup` option. The popup can be closed by either selecting a country from the list or by tapping on the grey area at the sides. [See example](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--usefullscreenpopup) (using the React component).
38
38
 
39
39
  <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/mobile-fullscreen.jpg" alt="Mobile screenshot" width="270px" style="max-width: 100%" />
40
40
 
@@ -43,7 +43,7 @@ By default, on mobile devices we show a fullscreen popup instead of the inline d
43
43
  * Automatically select the user's current country using an IP lookup
44
44
  * Automatically set the input placeholder to an example number for the selected country
45
45
  * Navigate the country dropdown by typing a country's name, or using up/down keys
46
- * Automatic formatting as the user types
46
+ * Automatically format the number as the user types
47
47
  * Handle phone number extensions
48
48
  * The user types their national number and the plugin gives you the full standardized international number
49
49
  * Full validation, including specific error types
@@ -62,16 +62,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
62
62
  ## Getting Started (Using a CDN)
63
63
  1. Add the CSS
64
64
  ```html
65
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.16/build/css/intlTelInput.css">
65
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.18/build/css/intlTelInput.css">
66
66
  ```
67
67
 
68
68
  2. Add the plugin script and initialise it on your input element
69
69
  ```html
70
- <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.16/build/js/intlTelInput.min.js"></script>
70
+ <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.18/build/js/intlTelInput.min.js"></script>
71
71
  <script>
72
72
  const input = document.querySelector("#phone");
73
73
  window.intlTelInput(input, {
74
- utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.16/build/js/utils.js",
74
+ utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.2.18/build/js/utils.js",
75
75
  });
76
76
  </script>
77
77
  ```
@@ -141,11 +141,11 @@ When you initialise the plugin, the first argument is the input element, and the
141
141
 
142
142
  **allowDropdown**
143
143
  Type: `Boolean` Default: `true`
144
- Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
144
+ Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also, we display the selected flag on the right instead because it is just a marker of state. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown) (using the React component).
145
145
 
146
146
  **autoInsertDialCode**
147
147
  Type: `Boolean` Default: `false`
148
- When enabled (requires `nationalMode` to be disabled), the international dial code will be automatically inserted into the input in 3 situations: (A) upon initialisation, and (B) when the user selects a country from the dropdown, and (C) upon calling `setCountry`. Additionally, the plugin will listen for blur/submit events, and if the input only contains a dial code, it will automatically be removed to avoid submitting just that.
148
+ When enabled (requires `nationalMode` to be disabled), the international dial code will be automatically inserted into the input in 3 situations: (A) upon initialisation, and (B) when the user selects a country from the dropdown, and (C) upon calling `setCountry`. Additionally, the plugin will listen for blur/submit events, and if the input only contains a dial code, it will automatically be removed to avoid submitting just that. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--autoinsertdialcode) (using the React component).
149
149
 
150
150
  **autoPlaceholder**
151
151
  Type: `String` Default: `"polite"`
@@ -173,15 +173,15 @@ intlTelInput(input, {
173
173
 
174
174
  **dropdownContainer**
175
175
  Type: `Node` Default: `null`
176
- Expects a node e.g. `document.body`. Instead of putting the country dropdown next to the input, append it to the specified node, and it will then be positioned absolutely next to the input using JavaScript. This is useful when the input is inside a container with `overflow: hidden`. Note that the absolute positioning can be broken by scrolling, so it will automatically close on the `window` scroll event.
176
+ Expects a node e.g. `document.body`. Instead of putting the country dropdown markup next to the input, append it to the specified node, and it will then be positioned next to the input using JavaScript (using `position: fixed`). This is useful when the input is inside a container with `overflow: hidden`. Note that the positioning is broken by scrolling, so the dropdown will automatically close on the `window` scroll event.
177
177
 
178
178
  **excludeCountries**
179
179
  Type: `Array` Default: `[]`
180
- In the dropdown, display all countries except the ones you specify here.
180
+ In the dropdown, display all countries except the ones you specify here. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--excludecountries) (using the React component).
181
181
 
182
182
  **fixDropdownWidth**
183
183
  Type: `Boolean` Default: `true`
184
- Fix the dropdown width to the input width (rather than being as wide as the longest country name). This is automatically enabled when `countrySearch` is enabled for design reasons.
184
+ Fix the dropdown width to the input width (rather than being as wide as the longest country name). This is automatically enabled when `countrySearch` is enabled for design reasons. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--fixdropdownwidth) (using the React component).
185
185
 
186
186
  **formatAsYouType**
187
187
  Type: `Boolean` Default: `true`
@@ -193,7 +193,7 @@ Format the input value (according to the `nationalMode` option) during initialis
193
193
 
194
194
  **geoIpLookup**
195
195
  Type: `Function` Default: `null`
196
- When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that looks up the user's location, and then calls the success callback with the relevant country code. Also note that when instantiating the plugin, a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is returned under the `promise` instance property, so you can do something like `iti.promise.then(callback)` to know when initialisation requests like this have completed.
196
+ When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that calls an IP lookup service to get the user's location and then invokes the callback with the relevant country code. Also note that when instantiating the plugin, a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is returned under the `promise` instance property, so you can do something like `iti.promise.then(callback)` to know when initialisation requests like this have completed.
197
197
 
198
198
  Here is an example using the [ipapi](https://ipapi.co/api/?javascript#location-of-clients-ip) service:
199
199
  ```js
@@ -203,7 +203,7 @@ intlTelInput(input, {
203
203
  fetch("https://ipapi.co/json")
204
204
  .then(function(res) { return res.json(); })
205
205
  .then(function(data) { callback(data.country_code); })
206
- .catch(function() { callback("us"); });
206
+ .catch(function() { callback(); });
207
207
  }
208
208
  });
209
209
  ```
@@ -261,25 +261,25 @@ In the dropdown, display only the countries you specify - [see example](https://
261
261
 
262
262
  **placeholderNumberType**
263
263
  Type: `String` Default: `"MOBILE"`
264
- Specify [one of the keys](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L119) from the global enum `intlTelInputUtils.numberType` e.g. `"FIXED_LINE"` to set the number type to use for the placeholder.
264
+ Specify [one of the keys](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L119) from the global enum `intlTelInputUtils.numberType` e.g. `"FIXED_LINE"` to set the number type to use for the placeholder. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--placeholdernumbertype) (using the React component).
265
265
 
266
266
  **preferredCountries**
267
267
  Type: `Array` Default: `[]`
268
- Specify the countries to appear at the top of the list. Note that this option is not compatible with the new country search feature, and as such will be phased out.
268
+ Specify the countries to appear at the top of the list. Note that this option is not compatible with the new country search feature, and as such will be phased out. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--preferredcountries) (using the React component).
269
269
 
270
270
  **showFlags**
271
271
  Type: `Boolean` Default: `true`
272
- Set this to false to hide the flags e.g. for political reasons. Must be used in combination with `showSelectedDialCode` option, or with setting `allowDropdown` to `false`.
272
+ Set this to false to hide the flags e.g. for political reasons. Must be used in combination with `showSelectedDialCode` option, or with setting `allowDropdown` to `false`. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--showflags) (using the React component).
273
273
 
274
274
  **showSelectedDialCode**
275
275
  Type: `Boolean` Default: `false`
276
- Display the country dial code next to the selected flag.
276
+ Display the country dial code next to the selected flag. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--showselecteddialcode) (using the React component).
277
277
 
278
278
  <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separateDialCode.png" width="257px" height="46px">
279
279
 
280
280
  **useFullscreenPopup**
281
281
  Type: `Boolean` Default: `true on mobile devices, false otherwise`
282
- Control when the country list appears as a fullscreen popup vs an inline dropdown. By default, it will appear as a fullscreen popup on mobile devices (based on user-agent and screen width), to make better use of the limited space (similar to how a native `<select>` works), and as an inline dropdown on larger devices/screens.
282
+ Control when the country list appears as a fullscreen popup vs an inline dropdown. By default, it will appear as a fullscreen popup on mobile devices (based on user-agent and screen width), to make better use of the limited space (similar to how a native `<select>` works), and as an inline dropdown on larger devices/screens. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--usefullscreenpopup) (using the React component).
283
283
 
284
284
  **utilsScript**
285
285
  Type: `String` Default: `""` Example: `"build/js/utils.js"`
@@ -174,7 +174,7 @@
174
174
  margin-right: 6px;
175
175
  }
176
176
  .iti--container {
177
- position: absolute;
177
+ position: fixed;
178
178
  top: -1000px;
179
179
  left: -1000px;
180
180
  z-index: 1060;
package/build/js/data.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v19.2.16
2
+ * International Telephone Input v19.2.18
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v19.2.16
2
+ * International Telephone Input v19.2.18
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v19.2.16
2
+ * International Telephone Input v19.2.18
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -369,9 +369,9 @@
369
369
  key: "_translateCountryNames",
370
370
  value: function _translateCountryNames() {
371
371
  for (var i = 0; i < this.countries.length; i++) {
372
- var iso = this.countries[i].iso2.toLowerCase();
373
- if (this.options.i18n.hasOwnProperty(iso)) {
374
- this.countries[i].name = this.options.i18n[iso];
372
+ var iso2 = this.countries[i].iso2.toLowerCase();
373
+ if (this.options.i18n.hasOwnProperty(iso2)) {
374
+ this.countries[i].name = this.options.i18n[iso2];
375
375
  }
376
376
  }
377
377
  }
@@ -433,7 +433,7 @@
433
433
  this.preferredCountries = [];
434
434
  for (var i = 0; i < this.options.preferredCountries.length; i++) {
435
435
  var countryCode = this.options.preferredCountries[i].toLowerCase();
436
- var countryData = this._getCountryData(countryCode, false, true);
436
+ var countryData = this._getCountryData(countryCode, true);
437
437
  if (countryData) {
438
438
  this.preferredCountries.push(countryData);
439
439
  }
@@ -616,6 +616,7 @@
616
616
  }, {
617
617
  key: "_setInitialState",
618
618
  value: function _setInitialState() {
619
+ var overrideAutoCountry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
619
620
  // fix firefox bug: when first load page (with input with value set to number with intl dial
620
621
  // code) and initialising plugin removes the dial code from the input, then refresh page,
621
622
  // and we try to init plugin again but this time on number without dial code so get grey flag
@@ -630,8 +631,8 @@
630
631
  // flag, else fall back to the default country
631
632
  if (dialCode && !isRegionlessNanp) {
632
633
  this._updateFlagFromNumber(val);
633
- } else if (initialCountry !== "auto") {
634
- var isValidInitialCountry = initialCountry && this._getCountryData(initialCountry, false, true);
634
+ } else if (initialCountry !== "auto" || overrideAutoCountry) {
635
+ var isValidInitialCountry = initialCountry && !!this._getCountryData(initialCountry, true);
635
636
  // see if we should select a flag
636
637
  if (isValidInitialCountry) {
637
638
  this._setFlag(initialCountry.toLowerCase());
@@ -747,7 +748,8 @@
747
748
  } else {
748
749
  this.resolveUtilsScriptPromise();
749
750
  }
750
- if (this.options.initialCountry === "auto") {
751
+ // dont bother with IP lookup if we already have a selected country
752
+ if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
751
753
  this._loadAutoCountry();
752
754
  } else {
753
755
  this.resolveAutoCountryPromise();
@@ -756,6 +758,7 @@
756
758
  }, {
757
759
  key: "_loadAutoCountry",
758
760
  value: function _loadAutoCountry() {
761
+ var _this5 = this;
759
762
  // 3 options:
760
763
  // 1) already loaded (we're done)
761
764
  // 2) not already started loading (start)
@@ -766,17 +769,25 @@
766
769
  // don't do this twice!
767
770
  window.intlTelInputGlobals.startedLoadingAutoCountry = true;
768
771
  if (typeof this.options.geoIpLookup === "function") {
769
- this.options.geoIpLookup(function(countryCode) {
770
- window.intlTelInputGlobals.autoCountry = countryCode.toLowerCase();
771
- // tell all instances the auto country is ready
772
- // TODO: this should just be the current instances
773
- // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
774
- // away (e.g. if they have already done the geo ip lookup somewhere else). Using
775
- // setTimeout means that the current thread of execution will finish before executing
776
- // this, which allows the plugin to finish initialising.
777
- setTimeout(function() {
778
- return forEachInstance("handleAutoCountry");
779
- });
772
+ this.options.geoIpLookup(function() {
773
+ var countryCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
774
+ var lowerCountryCode = countryCode.toLowerCase();
775
+ var isValid = !!_this5._getCountryData(lowerCountryCode, true);
776
+ if (isValid) {
777
+ window.intlTelInputGlobals.autoCountry = lowerCountryCode;
778
+ // tell all instances the auto country is ready
779
+ // TODO: this should just be the current instances
780
+ // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
781
+ // away (e.g. if they have already done the geo ip lookup somewhere else). Using
782
+ // setTimeout means that the current thread of execution will finish before executing
783
+ // this, which allows the plugin to finish initialising.
784
+ setTimeout(function() {
785
+ return forEachInstance("handleAutoCountry");
786
+ });
787
+ } else {
788
+ _this5._setInitialState(true);
789
+ forEachInstance("rejectAutoCountryPromise");
790
+ }
780
791
  }, function() {
781
792
  return forEachInstance("rejectAutoCountryPromise");
782
793
  });
@@ -786,36 +797,36 @@
786
797
  }, {
787
798
  key: "_initKeyListeners",
788
799
  value: function _initKeyListeners() {
789
- var _this5 = this;
800
+ var _this6 = this;
790
801
  var userOverrideFormatting = false;
791
802
  // update flag on input event
792
803
  this._handleKeyEvent = function(e) {
793
- if (_this5._updateFlagFromNumber(_this5.telInput.value)) {
794
- _this5._triggerCountryChange();
804
+ if (_this6._updateFlagFromNumber(_this6.telInput.value)) {
805
+ _this6._triggerCountryChange();
795
806
  }
796
807
  // if user types their own formatting char (not a plus or a numeric), then set the override
797
808
  if (e && e.data && /[^+0-9]/.test(e.data)) {
798
809
  userOverrideFormatting = true;
799
- } else if (!/[^+0-9]/.test(_this5.telInput.value)) {
810
+ } else if (!/[^+0-9]/.test(_this6.telInput.value)) {
800
811
  userOverrideFormatting = false;
801
812
  }
802
- if (_this5.options.formatAsYouType && !userOverrideFormatting) {
813
+ if (_this6.options.formatAsYouType && !userOverrideFormatting) {
803
814
  // maintain caret position after reformatting
804
- var currentCaretPos = _this5.telInput.selectionStart;
805
- var valueBeforeCaret = _this5.telInput.value.substring(0, currentCaretPos);
815
+ var currentCaretPos = _this6.telInput.selectionStart;
816
+ var valueBeforeCaret = _this6.telInput.value.substring(0, currentCaretPos);
806
817
  var relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
807
818
  var isDeleteForwards = e && e.inputType === "deleteContentForward";
808
- var formattedValue = _this5._formatNumberAsYouType();
809
- var newCaretPos = _this5._translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
810
- _this5.telInput.value = formattedValue;
811
- _this5.telInput.setSelectionRange(newCaretPos, newCaretPos);
819
+ var formattedValue = _this6._formatNumberAsYouType();
820
+ var newCaretPos = _this6._translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
821
+ _this6.telInput.value = formattedValue;
822
+ _this6.telInput.setSelectionRange(newCaretPos, newCaretPos);
812
823
  }
813
824
  };
814
825
  this.telInput.addEventListener("input", this._handleKeyEvent);
815
826
  // update flag on cut/paste events (now supported in all major browsers)
816
827
  this._handleClipboardEvent = function() {
817
828
  // hack because "paste" event is fired before input is updated
818
- setTimeout(_this5._handleKeyEvent);
829
+ setTimeout(_this6._handleKeyEvent);
819
830
  };
820
831
  this.telInput.addEventListener("cut", this._handleClipboardEvent);
821
832
  this.telInput.addEventListener("paste", this._handleClipboardEvent);
@@ -855,10 +866,10 @@
855
866
  }, {
856
867
  key: "_initBlurListeners",
857
868
  value: function _initBlurListeners() {
858
- var _this6 = this;
869
+ var _this7 = this;
859
870
  // on blur or form submit: if just a dial code then remove it
860
871
  this._handleSubmitOrBlurEvent = function() {
861
- _this6._removeEmptyDialCode();
872
+ _this7._removeEmptyDialCode();
862
873
  };
863
874
  if (this.telInput.form) {
864
875
  this.telInput.form.addEventListener("submit", this._handleSubmitOrBlurEvent);
@@ -929,7 +940,7 @@
929
940
  }, {
930
941
  key: "_setDropdownPosition",
931
942
  value: function _setDropdownPosition() {
932
- var _this7 = this;
943
+ var _this8 = this;
933
944
  if (this.options.dropdownContainer) {
934
945
  this.options.dropdownContainer.appendChild(this.dropdown);
935
946
  }
@@ -949,15 +960,14 @@
949
960
  this._toggleClass(this.dropdownContent, "iti__dropdown-content--dropup", positionDropdownAboveInput);
950
961
  // if dropdownContainer is enabled, calculate postion
951
962
  if (this.options.dropdownContainer) {
952
- // by default the dropdown will be directly over the input because it's not in the flow.
953
- // If we want to position it below, we need to add some extra top value.
963
+ // if we want to position the dropdown below the input, we need to add the input height to the top value
954
964
  var extraTop = positionDropdownAboveInput ? 0 : this.telInput.offsetHeight;
955
965
  // calculate placement
956
966
  this.dropdown.style.top = "".concat(inputTop + extraTop, "px");
957
967
  this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px");
958
968
  // close menu on window scroll
959
969
  this._handleWindowScroll = function() {
960
- return _this7._closeDropdown();
970
+ return _this8._closeDropdown();
961
971
  };
962
972
  window.addEventListener("scroll", this._handleWindowScroll);
963
973
  }
@@ -966,14 +976,14 @@
966
976
  }, {
967
977
  key: "_bindDropdownListeners",
968
978
  value: function _bindDropdownListeners() {
969
- var _this8 = this;
979
+ var _this9 = this;
970
980
  // when mouse over a list item, just highlight that one
971
981
  // we add the class "highlight", so if they hit "enter" we know which one to select
972
982
  this._handleMouseoverCountryList = function(e) {
973
983
  // handle event delegation, as we're listening for this event on the countryList
974
984
  var listItem = e.target.closest(".iti__country");
975
985
  if (listItem) {
976
- _this8._highlightListItem(listItem, false);
986
+ _this9._highlightListItem(listItem, false);
977
987
  }
978
988
  };
979
989
  this.countryList.addEventListener("mouseover", this._handleMouseoverCountryList);
@@ -981,7 +991,7 @@
981
991
  this._handleClickCountryList = function(e) {
982
992
  var listItem = e.target.closest(".iti__country");
983
993
  if (listItem) {
984
- _this8._selectListItem(listItem);
994
+ _this9._selectListItem(listItem);
985
995
  }
986
996
  };
987
997
  this.countryList.addEventListener("click", this._handleClickCountryList);
@@ -991,7 +1001,7 @@
991
1001
  var isOpening = true;
992
1002
  this._handleClickOffToClose = function() {
993
1003
  if (!isOpening) {
994
- _this8._closeDropdown();
1004
+ _this9._closeDropdown();
995
1005
  }
996
1006
  isOpening = false;
997
1007
  };
@@ -1010,23 +1020,23 @@
1010
1020
  e.stopPropagation();
1011
1021
  // up and down to navigate
1012
1022
  if (e.key === "ArrowUp" || e.key === "ArrowDown") {
1013
- _this8._handleUpDownKey(e.key);
1023
+ _this9._handleUpDownKey(e.key);
1014
1024
  } else if (e.key === "Enter") {
1015
- _this8._handleEnterKey();
1025
+ _this9._handleEnterKey();
1016
1026
  } else if (e.key === "Escape") {
1017
- _this8._closeDropdown();
1027
+ _this9._closeDropdown();
1018
1028
  }
1019
1029
  }
1020
1030
  // alpha chars to perform search
1021
1031
  // regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
1022
- if (!_this8.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
1032
+ if (!_this9.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
1023
1033
  e.stopPropagation();
1024
1034
  // jump to countries that start with the query string
1025
1035
  if (queryTimer) {
1026
1036
  clearTimeout(queryTimer);
1027
1037
  }
1028
1038
  query += e.key.toLowerCase();
1029
- _this8._searchForCountry(query);
1039
+ _this9._searchForCountry(query);
1030
1040
  // if the timer hits 1 second, reset the query
1031
1041
  queryTimer = setTimeout(function() {
1032
1042
  query = "";
@@ -1036,11 +1046,11 @@
1036
1046
  document.addEventListener("keydown", this._handleKeydownOnDropdown);
1037
1047
  if (this.options.countrySearch) {
1038
1048
  var doFilter = function doFilter() {
1039
- var inputQuery = _this8.searchInput.value.trim();
1049
+ var inputQuery = _this9.searchInput.value.trim();
1040
1050
  if (inputQuery) {
1041
- _this8._filterCountries(inputQuery);
1051
+ _this9._filterCountries(inputQuery);
1042
1052
  } else {
1043
- _this8._filterCountries("", true);
1053
+ _this9._filterCountries("", true);
1044
1054
  }
1045
1055
  };
1046
1056
  var keyupTimer = null;
@@ -1204,8 +1214,8 @@
1204
1214
  // Note: use getNumeric here because the number has not been formatted yet, so could contain
1205
1215
  // bad chars
1206
1216
  countryCode = "";
1207
- } else if (!number || number === "+") {
1208
- // empty, or just a plus, so default
1217
+ } else if ((!number || number === "+") && !this.selectedCountryData.iso2) {
1218
+ // if no selected flag, and user either clears the input, or just types a plus, then show default
1209
1219
  countryCode = this.defaultCountry;
1210
1220
  }
1211
1221
  if (countryCode !== null) {
@@ -1239,11 +1249,10 @@
1239
1249
  }
1240
1250
  }, {
1241
1251
  key: "_getCountryData",
1242
- value: function _getCountryData(countryCode, ignoreOnlyCountriesOption, allowFail) {
1243
- var countryList = ignoreOnlyCountriesOption ? allCountries : this.countries;
1244
- for (var i = 0; i < countryList.length; i++) {
1245
- if (countryList[i].iso2 === countryCode) {
1246
- return countryList[i];
1252
+ value: function _getCountryData(countryCode, allowFail) {
1253
+ for (var i = 0; i < this.countries.length; i++) {
1254
+ if (this.countries[i].iso2 === countryCode) {
1255
+ return this.countries[i];
1247
1256
  }
1248
1257
  }
1249
1258
  if (allowFail) {
@@ -1257,7 +1266,7 @@
1257
1266
  var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, showSelectedDialCode = _this$options3.showSelectedDialCode, showFlags = _this$options3.showFlags, countrySearch = _this$options3.countrySearch;
1258
1267
  var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
1259
1268
  // do this first as it will throw an error and stop if countryCode is invalid
1260
- this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
1269
+ this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false) : {};
1261
1270
  // update the defaultCountry - we only need the iso2 from now on, so just store that
1262
1271
  if (this.selectedCountryData.iso2) {
1263
1272
  this.defaultCountry = this.selectedCountryData.iso2;
@@ -1729,7 +1738,7 @@
1729
1738
  // default options
1730
1739
  intlTelInputGlobals.defaults = defaults;
1731
1740
  // version
1732
- intlTelInputGlobals.version = "19.2.16";
1741
+ intlTelInputGlobals.version = "19.2.18";
1733
1742
  var pluginName = "intlTelInput";
1734
1743
  // A really lightweight plugin wrapper around the constructor,
1735
1744
  // preventing against multiple instantiations