intl-tel-input 18.5.3 → 19.0.0

package/src/js/intlTelInput.js

@@ -23,9 +23,9 @@ const defaults = {
   // add a placeholder in the input with an example number for the selected country
   autoPlaceholder: "polite",
   // add a country search input at the top of the dropdown
-  countrySearch: false,
+  countrySearch: true,
   // modify the parentClass
-  customContainer: "",
+  containerClass: "",
   // modify the auto placeholder
   customPlaceholder: null,
   // append menu to specified element
@@ -33,29 +33,29 @@ const defaults = {
   // don't display these countries
   excludeCountries: [],
   // fix the dropdown width to the input width (rather than being as wide as the longest country name)
-  fixDropdownWidth: false,
+  fixDropdownWidth: true,
   // format the input value during initialisation and on setNumber
   formatOnDisplay: true,
   // geoIp lookup function
   geoIpLookup: null,
   // inject a hidden input with this name, and on submit, populate it with the result of getNumber
-  hiddenInput: "",
+  hiddenInput: null,
+  // internationalise the plugin text e.g. search input placeholder, country names
+  i18n: {},
   // initial country
   initialCountry: "",
-  // localized country names e.g. { 'de': 'Deutschland' }
-  localizedCountries: null,
   // national vs international formatting for numbers e.g. placeholders and displaying existing numbers
   nationalMode: true,
   // display only these countries
   onlyCountries: [],
   // number type to use for placeholders
   placeholderNumberType: "MOBILE",
-  // the countries at the top of the list. defaults to united states and united kingdom
-  preferredCountries: ["us", "gb"],
-  // display the country dial code next to the selected flag
-  separateDialCode: false,
-  // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
+  // the countries at the top of the list
+  preferredCountries: [],
+  // option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false
   showFlags: true,
+  // display the international dial code next to the selected flag
+  showSelectedDialCode: false,
   // use full screen popup instead of dropdown for country list
   useFullscreenPopup:
     typeof navigator !== "undefined" && typeof window !== "undefined"
@@ -90,26 +90,16 @@ const regionlessNanpNumbers = [
   "889"
 ];
 
-// utility function to iterate over an object. can't use Object.entries or native forEach because
-// of IE11
-const forEachProp = (obj, callback) => {
-  const keys = Object.keys(obj);
-  for (let i = 0; i < keys.length; i++) {
-    callback(keys[i], obj[keys[i]]);
-  }
-};
-
 // run a method on each instance of the plugin
 const forEachInstance = (method) => {
-  forEachProp(window.intlTelInputGlobals.instances, (key) => {
-    window.intlTelInputGlobals.instances[key][method]();
-  });
+  const { instances } = window.intlTelInputGlobals;
+  Object.values(instances).forEach((instance) => instance[method]());
 };
 
 // this is our plugin class that we will create an instance of
 // eslint-disable-next-line no-unused-vars
 class Iti {
-  constructor(input, options) {
+  constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
 
@@ -117,15 +107,7 @@ class Iti {
     this.highlightedItem = null;
 
     // process specified options / defaults
-    // alternative to Object.assign, which isn't supported by IE11
-    const customOptions = options || {};
-    this.options = {};
-    forEachProp(defaults, (key, value) => {
-      this.options[key] = customOptions.hasOwnProperty(key)
-        ? customOptions[key]
-        : value;
-    });
-
+    this.options = Object.assign({}, defaults, customOptions);
     this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
   }
 
@@ -145,15 +127,15 @@ class Iti {
       this.options.autoInsertDialCode = false;
     }
 
-    // if separateDialCode enabled, do not insert dial codes
-    if (this.options.separateDialCode) {
+    // if showSelectedDialCode enabled, do not insert dial codes
+    if (this.options.showSelectedDialCode) {
       this.options.autoInsertDialCode = false;
     }
 
     // force showFlags=true if there's a dropdown and we're not displaying the dial code,
     // as otherwise you just have a down arrow on it's own which doesn't make sense
     const forceShowFlags =
-      this.options.allowDropdown && !this.options.separateDialCode;
+      this.options.allowDropdown && !this.options.showSelectedDialCode;
     if (!this.options.showFlags && forceShowFlags) {
       this.options.showFlags = true;
     }
@@ -221,13 +203,11 @@ class Iti {
     // process the preferredCountries
     this._processPreferredCountries();
 
-    // translate countries according to localizedCountries option
-    if (this.options.localizedCountries) {
-      this._translateCountriesByLocale();
-    }
+    // translate country names according to i18n option
+    this._translateCountryNames();
 
     // sort countries by name
-    if (this.options.onlyCountries.length || this.options.localizedCountries) {
+    if (this.options.onlyCountries.length || this.options.i18n) {
       this.countries.sort(this._countryNameSort);
     }
   }
@@ -274,11 +254,11 @@ class Iti {
   }
 
   // Translate Countries by object literal provided on config
-  _translateCountriesByLocale() {
+  _translateCountryNames() {
     for (let i = 0; i < this.countries.length; i++) {
       const iso = this.countries[i].iso2.toLowerCase();
-      if (this.options.localizedCountries.hasOwnProperty(iso)) {
-        this.countries[i].name = this.options.localizedCountries[iso];
+      if (this.options.i18n.hasOwnProperty(iso)) {
+        this.countries[i].name = this.options.i18n[iso];
       }
     }
   }
@@ -354,7 +334,7 @@ class Iti {
   _createEl(name, attrs, container) {
     const el = document.createElement(name);
     if (attrs) {
-      forEachProp(attrs, (key, value) => el.setAttribute(key, value));
+      Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
     }
     if (container) {
       container.appendChild(el);
@@ -379,9 +359,9 @@ class Iti {
 
     const {
       allowDropdown,
-      separateDialCode,
+      showSelectedDialCode,
       showFlags,
-      customContainer,
+      containerClass,
       hiddenInput,
       dropdownContainer,
       fixDropdownWidth,
@@ -394,20 +374,23 @@ class Iti {
     if (allowDropdown) {
       parentClass += " iti--allow-dropdown";
     }
-    if (separateDialCode) {
-      parentClass += " iti--separate-dial-code";
+    if (showSelectedDialCode) {
+      parentClass += " iti--show-selected-dial-code";
     }
     if (showFlags) {
       parentClass += " iti--show-flags";
     }
-    if (customContainer) {
-      parentClass += ` ${customContainer}`;
+    if (containerClass) {
+      parentClass += ` ${containerClass}`;
+    }
+    if (!useFullscreenPopup) {
+      parentClass += " iti--inline-dropdown";
     }
 
     const wrapper = this._createEl("div", { class: parentClass });
     this.telInput.parentNode.insertBefore(wrapper, this.telInput);
-    // only hide the flagsContainer if allowDropdown, showFlags and separateDialCode are all false
-    const showFlagsContainer = allowDropdown || showFlags || separateDialCode;
+    // only hide the flagsContainer if allowDropdown, showFlags and showSelectedDialCode are all false
+    const showFlagsContainer = allowDropdown || showFlags || showSelectedDialCode;
     if (showFlagsContainer) {
       this.flagsContainer = this._createEl(
         "div",
@@ -430,7 +413,7 @@ class Iti {
             "aria-haspopup": "listbox",
             "aria-controls": `iti-${this.id}__country-listbox`,
             "aria-expanded": "false",
-            "aria-label": "Telephone country code"
+            "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country"
           })
         },
         this.flagsContainer
@@ -448,7 +431,7 @@ class Iti {
       this.selectedFlag.setAttribute("aria-disabled", "true");
     }
 
-    if (separateDialCode) {
+    if (showSelectedDialCode) {
       this.selectedDialCode = this._createEl(
         "div",
         { class: "iti__selected-dial-code" },
@@ -479,7 +462,7 @@ class Iti {
           {
             type: "text",
             class: "iti__search-input",
-            placeholder: "Search"
+            placeholder: this.options.i18n.searchPlaceholder || "Search"
           },
           this.dropdownContent
         );
@@ -492,7 +475,7 @@ class Iti {
           class: "iti__country-list",
           id: `iti-${this.id}__country-listbox`,
           role: "listbox",
-          "aria-label": "List of countries"
+          "aria-label": this.options.i18n.countryListAriaLabel || "List of countries"
         },
         this.dropdownContent
       );
@@ -514,6 +497,8 @@ class Iti {
         let dropdownClasses = "iti iti--container";
         if (useFullscreenPopup) {
           dropdownClasses += " iti--fullscreen-popup";
+        } else {
+          dropdownClasses += " iti--inline-dropdown";
         }
         if (countrySearch) {
           dropdownClasses += " iti--country-search";
@@ -526,16 +511,8 @@ class Iti {
     }
 
     if (hiddenInput) {
-      let hiddenInputName = hiddenInput;
-      const name = this.telInput.getAttribute("name");
-      if (name) {
-        const i = name.lastIndexOf("[");
-        // if input name contains square brackets, then give the hidden input the same name,
-        // replacing the contents of the last set of brackets with the given hiddenInput name
-        if (i !== -1) {
-          hiddenInputName = `${name.substr(0, i)}[${hiddenInputName}]`;
-        }
-      }
+      const telInputName = this.telInput.getAttribute("name");
+      const hiddenInputName = hiddenInput(telInputName);
       this.hiddenInput = this._createEl("input", {
         type: "hidden",
         name: hiddenInputName
@@ -663,15 +640,6 @@ class Iti {
     }
   }
 
-  // iterate through parent nodes to find the closest label ancestor, if it exists
-  _getClosestLabel() {
-    let el = this.telInput;
-    while (el && el.tagName !== "LABEL") {
-      el = el.parentNode;
-    }
-    return el;
-  }
-
   // initialise the dropdown listeners
   _initDropdownListeners() {
     // hack for input nested inside label (which is valid markup): clicking the selected-flag to
@@ -685,7 +653,7 @@ class Iti {
         e.preventDefault();
       }
     };
-    const label = this._getClosestLabel();
+    const label = this.telInput.closest("label");
     if (label) {
       label.addEventListener("click", this._handleLabelClick);
     }
@@ -848,9 +816,10 @@ class Iti {
 
   // trigger a custom event on the input
   _trigger(name) {
-    // have to use old school document.createEvent as IE11 doesn't support `new Event()` syntax
-    const e = document.createEvent("Event");
-    e.initEvent(name, true, true); // can bubble, and is cancellable
+    const e = new Event(name, {
+      bubbles: true,
+      cancelable: true
+    });
     this.telInput.dispatchEvent(e);
   }
 
@@ -892,7 +861,7 @@ class Iti {
     }
   }
 
-  // decide where to position dropdown (depends on position within viewport, and scroll)
+  // decide if should position dropdown above or below input (depends on position within viewport, and scroll)
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
       this.options.dropdownContainer.appendChild(this.dropdown);
@@ -901,8 +870,7 @@ class Iti {
     if (!this.options.useFullscreenPopup) {
       const pos = this.telInput.getBoundingClientRect();
       // windowTop from https://stackoverflow.com/a/14384091/217866
-      const windowTop =
-        window.pageYOffset || document.documentElement.scrollTop;
+      const windowTop = document.documentElement.scrollTop;
       const inputTop = pos.top + windowTop;
       const dropdownHeight = this.dropdownContent.offsetHeight;
       // dropdownFitsBelow = (dropdownBottom < windowBottom)
@@ -941,27 +909,13 @@ class Iti {
     }
   }
 
-  // iterate through parent nodes to find the closest list item
-  _getClosestListItem(target) {
-    let el = target;
-    while (
-      el &&
-      el !== this.countryList &&
-      !el.classList.contains("iti__country")
-    ) {
-      el = el.parentNode;
-    }
-    // if we reached the countryList element, then return null
-    return el === this.countryList ? null : el;
-  }
-
   // we only bind dropdown listeners when the dropdown is open
   _bindDropdownListeners() {
     // when mouse over a list item, just highlight that one
     // we add the class "highlight", so if they hit "enter" we know which one to select
     this._handleMouseoverCountryList = (e) => {
       // handle event delegation, as we're listening for this event on the countryList
-      const listItem = this._getClosestListItem(e.target);
+      const listItem = e.target.closest(".iti__country");
       if (listItem) {
         this._highlightListItem(listItem, false);
       }
@@ -973,7 +927,7 @@ class Iti {
 
     // listen for country selection
     this._handleClickCountryList = (e) => {
-      const listItem = this._getClosestListItem(e.target);
+      const listItem = e.target.closest(".iti__country");
       if (listItem) {
         this._selectListItem(listItem);
       }
@@ -1078,7 +1032,8 @@ class Iti {
       if (
         isReset ||
         nameLower.includes(query) ||
-        fullDialCode.includes(query)
+        fullDialCode.includes(query) ||
+        c.iso2.includes(query)
       ) {
         this.countryList.appendChild(c.node);
         // highlight the first item
@@ -1157,7 +1112,7 @@ class Iti {
     ) {
       const useNational =
         this.options.nationalMode ||
-        (number.charAt(0) !== "+" && !this.options.separateDialCode);
+        (number.charAt(0) !== "+" && !this.options.showSelectedDialCode);
       const { NATIONAL, INTERNATIONAL } = intlTelInputUtils.numberFormat;
       const format = useNational ? NATIONAL : INTERNATIONAL;
       number = intlTelInputUtils.formatNumber(
@@ -1194,9 +1149,9 @@ class Iti {
       number = `+${number}`;
     }
 
-    // if separateDialCode enabled, then consider the selected dial code to be part of the number
+    // if showSelectedDialCode enabled, then consider the selected dial code to be part of the number
     if (
-      this.options.separateDialCode &&
+      this.options.showSelectedDialCode &&
       selectedDialCode &&
       number.charAt(0) !== "+"
     ) {
@@ -1298,7 +1253,7 @@ class Iti {
   // select the given flag, update the placeholder, title, and the active list item
   // Note: called from _setInitialState, _updateFlagFromNumber, _selectListItem, setCountry
   _setFlag(countryCode) {
-    const { allowDropdown, separateDialCode, showFlags } = this.options;
+    const { allowDropdown, showSelectedDialCode, showFlags } = this.options;
 
     const prevCountry = this.selectedCountryData.iso2
       ? this.selectedCountryData
@@ -1320,9 +1275,9 @@ class Iti {
       );
     }
 
-    this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);
+    this._setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode);
 
-    if (separateDialCode) {
+    if (showSelectedDialCode) {
       const dialCode = this.selectedCountryData.dialCode
         ? `+${this.selectedCountryData.dialCode}`
         : "";
@@ -1368,13 +1323,13 @@ class Iti {
     return prevCountry.iso2 !== countryCode;
   }
 
-  _setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
+  _setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode) {
     if (!this.selectedFlag) {
       return;
     }
 
     let title;
-    if (countryCode && !separateDialCode) {
+    if (countryCode && !showSelectedDialCode) {
       title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
     } else if (countryCode) {
       // For screen reader output, we don't want to include the dial code in the reader output twice
@@ -1389,7 +1344,7 @@ class Iti {
 
   // when the input is in a hidden container during initialisation, we must inject some markup
   // into the end of the DOM to calculate the correct offsetWidth
-  // NOTE: this is only used when separateDialCode is enabled, so flagsContainer and selectedFlag
+  // NOTE: this is only used when showSelectedDialCode is enabled, so flagsContainer and selectedFlag
   // will definitely exist
   _getHiddenSelectedFlagWidth() {
     // to get the right styling to apply, all we need is a shallow clone of the container,
@@ -1449,10 +1404,6 @@ class Iti {
 
     // focus the input
     this.telInput.focus();
-    // put cursor at end - this fix is required for FF and IE11 (with auto inserting dial code),
-    // who try to put the cursor at the beginning the first time
-    const len = this.telInput.value.length;
-    this.telInput.setSelectionRange(len, len);
 
     if (flagChanged) {
       this._triggerCountryChange();
@@ -1500,7 +1451,7 @@ class Iti {
   _scrollTo(element, middle) {
     const container = this.dropdownContent;
     // windowTop from https://stackoverflow.com/a/14384091/217866
-    const windowTop = window.pageYOffset || document.documentElement.scrollTop;
+    const windowTop = document.documentElement.scrollTop;
     const containerHeight = container.offsetHeight;
     const containerTop = container.getBoundingClientRect().top + windowTop;
     const containerBottom = containerTop + containerHeight;
@@ -1593,7 +1544,7 @@ class Iti {
     return dialCode;
   }
 
-  // get the input val, adding the dial code if separateDialCode is enabled
+  // get the input val, adding the dial code if showSelectedDialCode is enabled
   _getFullNumber() {
     const val = this.telInput.value.trim();
     const { dialCode } = this.selectedCountryData;
@@ -1601,12 +1552,12 @@ class Iti {
     const numericVal = this._getNumeric(val);
 
     if (
-      this.options.separateDialCode &&
+      this.options.showSelectedDialCode &&
       val.charAt(0) !== "+" &&
       dialCode &&
       numericVal
     ) {
-      // when using separateDialCode, it is visible so is effectively part of the typed number
+      // when using showSelectedDialCode, it is visible so is effectively part of the typed number
       prefix = `+${dialCode}`;
     } else {
       prefix = "";
@@ -1614,11 +1565,11 @@ class Iti {
     return prefix + val;
   }
 
-  // remove the dial code if separateDialCode is enabled
+  // remove the dial code if showSelectedDialCode is enabled
   // also cap the length if the input has a maxlength attribute
   _beforeSetNumber(fullNumber) {
     let number = fullNumber;
-    if (this.options.separateDialCode) {
+    if (this.options.showSelectedDialCode) {
       let dialCode = this._getDialCode(number);
       // if there is a valid dial code
       if (dialCode) {
@@ -1695,7 +1646,7 @@ class Iti {
         this._handleFlagsContainerKeydown
       );
       // label click hack
-      const label = this._getClosestLabel();
+      const label = this.telInput.closest("label");
       if (label) {
         label.removeEventListener("click", this._handleLabelClick);
       }
@@ -1779,19 +1730,19 @@ class Iti {
     return -99;
   }
 
-  // validate the input val - assumes the global function isValidNumber (from utilsScript)
+  // validate the input val - assumes the global function isPossibleNumber (from utilsScript)
   isValidNumber() {
     const val = this._getFullNumber().trim();
     return window.intlTelInputUtils
-      ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2)
+      ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2)
       : null;
   }
 
-  // check if input val is possible number (weaker validation, but more future-proof) - assumes the global function isPossibleNumber (from utilsScript)
-  isPossibleNumber() {
+  // validate the input val (precise) - assumes the global function isValidNumber (from utilsScript)
+  isValidNumberPrecise() {
     const val = this._getFullNumber().trim();
     return window.intlTelInputUtils
-      ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2)
+      ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2)
       : null;
   }
 

package/src/spec/helpers/helpers.js

@@ -2,7 +2,8 @@ var input,
   iti,
   totalCountries = 244,
   totalDialCodes = 228,
-  defaultPreferredCountries = 2;
+  defaultPreferredCountries = 0,
+  afghanistanDialCode = "+93";
 
 var intlSetup = function(utilsScript) {
   // by default put us in desktop mode
@@ -50,6 +51,16 @@ var getParentElement = function(i) {
   return i.parent();
 };
 
+var getDropdownContent = function(i) {
+  i = i || input;
+  return i.parent().find(".iti__dropdown-content");
+};
+
+var getSearchInput = function(i) {
+  i = i || input;
+  return i.parent().find(".iti__search-input");
+};
+
 var getListElement = function(i) {
   i = i || input;
   return i.parent().find(".iti__country-list");
@@ -111,29 +122,31 @@ var selectInputChars = function(start, end) {
 
 // use this for focus/blur (instead of using .focus() and .blur() directly, which cause problems in IE11)
 var triggerInputEvent = function(type) {
-  var e = new CustomEvent(type);
+  var e = new Event(type);
   input[0].dispatchEvent(e);
 }
 
 var triggerKey = function(el, type, key) {
-  var e = new CustomEvent(type);
-  e.key = key;
+  var e = new KeyboardEvent(type, { key: key });
   el.dispatchEvent(e);
 };
 
 // trigger keydown, then keypress, then add the key, then keyup
-var triggerKeyOnInput = function(key) {
-  triggerKey(input[0], 'keydown', key);
-  triggerKey(input[0], 'keypress', key);
-  var val = input.val();
-  input.val(val + key);
-  triggerKey(input[0], 'keyup', key);
+var triggerKeyOnInput = function(key, customInput) {
+  const inputEl = customInput || input;
+  triggerKey(inputEl[0], 'keydown', key);
+  triggerKey(inputEl[0], 'keypress', key);
+  var previousVal = inputEl.val();
+  inputEl.val(previousVal + key);
+  triggerKey(inputEl[0], 'keyup', key);
+  triggerKey(inputEl[0], 'input', key);
 };
 
 var triggerKeyOnBody = function(key) {
   triggerKey(document, 'keydown', key);
   triggerKey(document, 'keypress', key);
   triggerKey(document, 'keyup', key);
+  triggerKey(document, 'input', key);
 };
 
 var triggerKeyOnFlagsContainerElement = function(key) {

package/src/spec/tests/core/countrychangeEvent.js

@@ -35,7 +35,7 @@ describe("countrychange event:", function() {
     });
 
     it("selecting another country triggers the event", function() {
-      selectFlag("af");
+      selectFlag("gb");
       expect(spy).toHaveBeenTriggered();
     });
 

package/src/spec/tests/core/dropdownShortcuts.js

@@ -1,11 +1,12 @@
 "use strict";
 
-describe("dropdown shortcuts: init plugin (with nationalMode=false, autoInsertDialCode=true) to test keyboard shortcuts", function() {
+describe("dropdown shortcuts: init plugin (with countrySearch=false, nationalMode=false, autoInsertDialCode=true) to test keyboard shortcuts", function() {
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").appendTo("body");
     iti = window.intlTelInput(input[0], {
+      countrySearch: false,
       nationalMode: false,
       autoInsertDialCode: true,
     });
@@ -138,7 +139,7 @@ describe("dropdown shortcuts: init plugin (with nationalMode=false, autoInsertDi
         });
 
         it("updates the dial code", function() {
-          expect(getInputVal()).toEqual("+44");
+          expect(getInputVal()).toEqual("+355");
         });
 
       });

package/src/spec/tests/core/initialValues.js

@@ -25,14 +25,13 @@ describe("initial values:", function() {
 
     it("has the right number of list items", function() {
       expect(getListLength()).toEqual(totalCountries + defaultPreferredCountries);
-      expect(getPreferredCountriesLength()).toEqual(defaultPreferredCountries);
       // only 1 active list item
       expect(getActiveListItem().length).toEqual(1);
     });
 
     it("sets the state correctly: selected flag and active list item", function() {
-      expect(getSelectedFlagElement()).toHaveClass("iti__us");
-      expect(getActiveListItem().attr("data-country-code")).toEqual("us");
+      expect(getSelectedFlagElement()).toHaveClass("iti__af");
+      expect(getActiveListItem().attr("data-country-code")).toEqual("af");
     });
 
   });

package/src/spec/tests/methods/getSelectedCountryData.js

@@ -13,7 +13,7 @@ describe("getSelectedCountryData: init plugin to test public method getSelectedC
   });
 
   it("gets the right default country data", function() {
-    expect(iti.getSelectedCountryData().iso2).toEqual("us");
+    expect(iti.getSelectedCountryData().iso2).toEqual("af");
   });
 
   it("change country by number gets the right country data", function() {