intl-tel-input 23.3.2 → 23.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "23.3.2",
+  "version": "23.4.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -24,6 +24,7 @@
   "license": "MIT",
   "author": "Jack O'Connor (http://jackocnr.com)",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",

package/react/README.md

@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/ValidationApp.tsx) for a more fleshed out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@23.3.2/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@23.4.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.

package/react/build/IntlTelInput.cjs

@@ -1397,6 +1397,8 @@ var defaults = {
   containerClass: "",
   //* The order of the countries in the dropdown. Defaults to alphabetical.
   countryOrder: null,
+  //* Add a country search input at the top of the dropdown.
+  countrySearch: true,
   //* Modify the auto placeholder.
   customPlaceholder: null,
   //* Append menu to specified element.
@@ -1519,6 +1521,7 @@ var Iti = class {
     if (this.options.separateDialCode) {
       this.options.allowDropdown = true;
       this.options.nationalMode = false;
+      this.options.countrySearch = true;
     }
     if (!this.options.showFlags && !this.options.separateDialCode) {
       this.options.nationalMode = false;
@@ -1671,6 +1674,7 @@ var Iti = class {
       dropdownContainer,
       fixDropdownWidth,
       useFullscreenPopup,
+      countrySearch,
       i18n
     } = this.options;
     let parentClass = "iti";
@@ -1747,26 +1751,28 @@ var Iti = class {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${extraClasses}`
         });
-        this.searchInput = createEl(
-          "input",
-          {
-            type: "text",
-            class: "iti__search-input",
-            placeholder: i18n.searchPlaceholder,
-            role: "combobox",
-            "aria-expanded": "true",
-            "aria-label": i18n.searchPlaceholder,
-            "aria-controls": `iti-${this.id}__country-listbox`,
-            "aria-autocomplete": "list",
-            "autocomplete": "off"
-          },
-          this.dropdownContent
-        );
-        this.searchResultsA11yText = createEl(
-          "span",
-          { class: "iti__a11y-text" },
-          this.dropdownContent
-        );
+        if (countrySearch) {
+          this.searchInput = createEl(
+            "input",
+            {
+              type: "text",
+              class: "iti__search-input",
+              placeholder: i18n.searchPlaceholder,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-label": i18n.searchPlaceholder,
+              "aria-controls": `iti-${this.id}__country-listbox`,
+              "aria-autocomplete": "list",
+              "autocomplete": "off"
+            },
+            this.dropdownContent
+          );
+          this.searchResultsA11yText = createEl(
+            "span",
+            { class: "iti__a11y-text" },
+            this.dropdownContent
+          );
+        }
         this.countryList = createEl(
           "ul",
           {
@@ -1777,8 +1783,10 @@ var Iti = class {
           },
           this.dropdownContent
         );
-        this._appendListItems(this.countries, "iti__standard");
-        this._updateSearchResultsText();
+        this._appendListItems();
+        if (countrySearch) {
+          this._updateSearchResultsText();
+        }
         if (dropdownContainer) {
           let dropdownClasses = "iti iti--container";
           if (useFullscreenPopup) {
@@ -1813,15 +1821,16 @@ var Iti = class {
       }
     }
   }
-  //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-  _appendListItems(countries, className) {
-    for (let i = 0; i < countries.length; i++) {
-      const c = countries[i];
+  //* For each country: add a country list item <li> to the countryList <ul> container.
+  _appendListItems() {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const extraClass = i === 0 ? "iti__highlight" : "";
       const listItem = createEl(
         "li",
         {
           id: `iti-${this.id}__item-${c.iso2}`,
-          class: `iti__country ${className}`,
+          class: `iti__country ${extraClass}`,
           tabindex: "-1",
           role: "option",
           "data-dial-code": c.dialCode,
@@ -2062,24 +2071,26 @@ var Iti = class {
   }
   //* Open the dropdown.
   _openDropdown() {
-    const { fixDropdownWidth } = this.options;
+    const { fixDropdownWidth, countrySearch } = this.options;
     if (fixDropdownWidth) {
       this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
     }
     this.dropdownContent.classList.remove("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "true");
     this._setDropdownPosition();
-    const firstCountryItem = this.countryList.firstElementChild;
-    if (firstCountryItem) {
-      this._highlightListItem(firstCountryItem, false);
-      this.countryList.scrollTop = 0;
+    if (countrySearch) {
+      const firstCountryItem = this.countryList.firstElementChild;
+      if (firstCountryItem) {
+        this._highlightListItem(firstCountryItem, false);
+        this.countryList.scrollTop = 0;
+      }
+      this.searchInput.focus();
     }
-    this.searchInput.focus();
     this._bindDropdownListeners();
     this.dropdownArrow.classList.add("iti__arrow--up");
     this._trigger("open:countrydropdown");
   }
-  //* Decide if should position dropdown above or below input (depends on position within viewport, and scroll).
+  //* Set the dropdown position
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
       this.options.dropdownContainer.appendChild(this.dropdown);
@@ -2125,6 +2136,8 @@ var Iti = class {
       "click",
       this._handleClickOffToClose
     );
+    let query = "";
+    let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
       if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
         e.preventDefault();
@@ -2137,29 +2150,56 @@ var Iti = class {
           this._closeDropdown();
         }
       }
-    };
-    document.addEventListener("keydown", this._handleKeydownOnDropdown);
-    const doFilter = () => {
-      const inputQuery = this.searchInput.value.trim();
-      if (inputQuery) {
-        this._filterCountries(inputQuery);
-      } else {
-        this._filterCountries("", true);
+      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+        e.stopPropagation();
+        if (queryTimer) {
+          clearTimeout(queryTimer);
+        }
+        query += e.key.toLowerCase();
+        this._searchForCountry(query);
+        queryTimer = setTimeout(() => {
+          query = "";
+        }, 1e3);
       }
     };
-    let keyupTimer = null;
-    this._handleSearchChange = () => {
-      if (keyupTimer) {
-        clearTimeout(keyupTimer);
+    document.addEventListener("keydown", this._handleKeydownOnDropdown);
+    if (this.options.countrySearch) {
+      const doFilter = () => {
+        const inputQuery = this.searchInput.value.trim();
+        if (inputQuery) {
+          this._filterCountries(inputQuery);
+        } else {
+          this._filterCountries("", true);
+        }
+      };
+      let keyupTimer = null;
+      this._handleSearchChange = () => {
+        if (keyupTimer) {
+          clearTimeout(keyupTimer);
+        }
+        keyupTimer = setTimeout(() => {
+          doFilter();
+          keyupTimer = null;
+        }, 100);
+      };
+      this.searchInput.addEventListener("input", this._handleSearchChange);
+      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
+  }
+  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
+  _searchForCountry(query) {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const startsWith = c.name.substr(0, query.length).toLowerCase() === query;
+      if (startsWith) {
+        const listItem = c.nodeById[this.id];
+        this._highlightListItem(listItem, false);
+        this._scrollTo(listItem);
+        break;
       }
-      keyupTimer = setTimeout(() => {
-        doFilter();
-        keyupTimer = null;
-      }, 100);
-    };
-    this.searchInput.addEventListener("input", this._handleSearchChange);
-    this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
   }
+  //* Country search enabled: Filter the countries according to the search query.
   _filterCountries(query, isReset = false) {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
@@ -2287,7 +2327,9 @@ var Iti = class {
       this.highlightedItem.setAttribute("aria-selected", "true");
       const activeDescendant = this.highlightedItem.getAttribute("id") || "";
       this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
-      this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      if (this.options.countrySearch) {
+        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      }
     }
     if (shouldFocus) {
       this.highlightedItem.focus();
@@ -2444,10 +2486,14 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
-    this.searchInput.removeAttribute("aria-activedescendant");
+    if (this.options.countrySearch) {
+      this.searchInput.removeAttribute("aria-activedescendant");
+    }
     this.dropdownArrow.classList.remove("iti__arrow--up");
     document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-    this.searchInput.removeEventListener("input", this._handleSearchChange);
+    if (this.options.countrySearch) {
+      this.searchInput.removeEventListener("input", this._handleSearchChange);
+    }
     document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
@@ -2758,7 +2804,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.3.2"
+    version: "23.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -591,6 +591,7 @@ declare module "intl-tel-input" {
         autoPlaceholder: string;
         containerClass: string;
         countryOrder: string[];
+        countrySearch: boolean;
         customPlaceholder: ((selectedCountryPlaceholder: string, selectedCountryData: object) => string) | null;
         dropdownContainer: HTMLElement | null;
         excludeCountries: string[];
@@ -934,6 +935,7 @@ declare module "intl-tel-input" {
         private _openDropdown;
         private _setDropdownPosition;
         private _bindDropdownListeners;
+        private _searchForCountry;
         private _filterCountries;
         private _updateSearchResultsText;
         private _handleUpDownKey;

package/react/build/IntlTelInput.js

@@ -1361,6 +1361,8 @@ var defaults = {
   containerClass: "",
   //* The order of the countries in the dropdown. Defaults to alphabetical.
   countryOrder: null,
+  //* Add a country search input at the top of the dropdown.
+  countrySearch: true,
   //* Modify the auto placeholder.
   customPlaceholder: null,
   //* Append menu to specified element.
@@ -1483,6 +1485,7 @@ var Iti = class {
     if (this.options.separateDialCode) {
       this.options.allowDropdown = true;
       this.options.nationalMode = false;
+      this.options.countrySearch = true;
     }
     if (!this.options.showFlags && !this.options.separateDialCode) {
       this.options.nationalMode = false;
@@ -1635,6 +1638,7 @@ var Iti = class {
       dropdownContainer,
       fixDropdownWidth,
       useFullscreenPopup,
+      countrySearch,
       i18n
     } = this.options;
     let parentClass = "iti";
@@ -1711,26 +1715,28 @@ var Iti = class {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${extraClasses}`
         });
-        this.searchInput = createEl(
-          "input",
-          {
-            type: "text",
-            class: "iti__search-input",
-            placeholder: i18n.searchPlaceholder,
-            role: "combobox",
-            "aria-expanded": "true",
-            "aria-label": i18n.searchPlaceholder,
-            "aria-controls": `iti-${this.id}__country-listbox`,
-            "aria-autocomplete": "list",
-            "autocomplete": "off"
-          },
-          this.dropdownContent
-        );
-        this.searchResultsA11yText = createEl(
-          "span",
-          { class: "iti__a11y-text" },
-          this.dropdownContent
-        );
+        if (countrySearch) {
+          this.searchInput = createEl(
+            "input",
+            {
+              type: "text",
+              class: "iti__search-input",
+              placeholder: i18n.searchPlaceholder,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-label": i18n.searchPlaceholder,
+              "aria-controls": `iti-${this.id}__country-listbox`,
+              "aria-autocomplete": "list",
+              "autocomplete": "off"
+            },
+            this.dropdownContent
+          );
+          this.searchResultsA11yText = createEl(
+            "span",
+            { class: "iti__a11y-text" },
+            this.dropdownContent
+          );
+        }
         this.countryList = createEl(
           "ul",
           {
@@ -1741,8 +1747,10 @@ var Iti = class {
           },
           this.dropdownContent
         );
-        this._appendListItems(this.countries, "iti__standard");
-        this._updateSearchResultsText();
+        this._appendListItems();
+        if (countrySearch) {
+          this._updateSearchResultsText();
+        }
         if (dropdownContainer) {
           let dropdownClasses = "iti iti--container";
           if (useFullscreenPopup) {
@@ -1777,15 +1785,16 @@ var Iti = class {
       }
     }
   }
-  //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-  _appendListItems(countries, className) {
-    for (let i = 0; i < countries.length; i++) {
-      const c = countries[i];
+  //* For each country: add a country list item <li> to the countryList <ul> container.
+  _appendListItems() {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const extraClass = i === 0 ? "iti__highlight" : "";
       const listItem = createEl(
         "li",
         {
           id: `iti-${this.id}__item-${c.iso2}`,
-          class: `iti__country ${className}`,
+          class: `iti__country ${extraClass}`,
           tabindex: "-1",
           role: "option",
           "data-dial-code": c.dialCode,
@@ -2026,24 +2035,26 @@ var Iti = class {
   }
   //* Open the dropdown.
   _openDropdown() {
-    const { fixDropdownWidth } = this.options;
+    const { fixDropdownWidth, countrySearch } = this.options;
     if (fixDropdownWidth) {
       this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
     }
     this.dropdownContent.classList.remove("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "true");
     this._setDropdownPosition();
-    const firstCountryItem = this.countryList.firstElementChild;
-    if (firstCountryItem) {
-      this._highlightListItem(firstCountryItem, false);
-      this.countryList.scrollTop = 0;
+    if (countrySearch) {
+      const firstCountryItem = this.countryList.firstElementChild;
+      if (firstCountryItem) {
+        this._highlightListItem(firstCountryItem, false);
+        this.countryList.scrollTop = 0;
+      }
+      this.searchInput.focus();
     }
-    this.searchInput.focus();
     this._bindDropdownListeners();
     this.dropdownArrow.classList.add("iti__arrow--up");
     this._trigger("open:countrydropdown");
   }
-  //* Decide if should position dropdown above or below input (depends on position within viewport, and scroll).
+  //* Set the dropdown position
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
       this.options.dropdownContainer.appendChild(this.dropdown);
@@ -2089,6 +2100,8 @@ var Iti = class {
       "click",
       this._handleClickOffToClose
     );
+    let query = "";
+    let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
       if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
         e.preventDefault();
@@ -2101,29 +2114,56 @@ var Iti = class {
           this._closeDropdown();
         }
       }
-    };
-    document.addEventListener("keydown", this._handleKeydownOnDropdown);
-    const doFilter = () => {
-      const inputQuery = this.searchInput.value.trim();
-      if (inputQuery) {
-        this._filterCountries(inputQuery);
-      } else {
-        this._filterCountries("", true);
+      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+        e.stopPropagation();
+        if (queryTimer) {
+          clearTimeout(queryTimer);
+        }
+        query += e.key.toLowerCase();
+        this._searchForCountry(query);
+        queryTimer = setTimeout(() => {
+          query = "";
+        }, 1e3);
       }
     };
-    let keyupTimer = null;
-    this._handleSearchChange = () => {
-      if (keyupTimer) {
-        clearTimeout(keyupTimer);
+    document.addEventListener("keydown", this._handleKeydownOnDropdown);
+    if (this.options.countrySearch) {
+      const doFilter = () => {
+        const inputQuery = this.searchInput.value.trim();
+        if (inputQuery) {
+          this._filterCountries(inputQuery);
+        } else {
+          this._filterCountries("", true);
+        }
+      };
+      let keyupTimer = null;
+      this._handleSearchChange = () => {
+        if (keyupTimer) {
+          clearTimeout(keyupTimer);
+        }
+        keyupTimer = setTimeout(() => {
+          doFilter();
+          keyupTimer = null;
+        }, 100);
+      };
+      this.searchInput.addEventListener("input", this._handleSearchChange);
+      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
+  }
+  //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
+  _searchForCountry(query) {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const startsWith = c.name.substr(0, query.length).toLowerCase() === query;
+      if (startsWith) {
+        const listItem = c.nodeById[this.id];
+        this._highlightListItem(listItem, false);
+        this._scrollTo(listItem);
+        break;
       }
-      keyupTimer = setTimeout(() => {
-        doFilter();
-        keyupTimer = null;
-      }, 100);
-    };
-    this.searchInput.addEventListener("input", this._handleSearchChange);
-    this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
   }
+  //* Country search enabled: Filter the countries according to the search query.
   _filterCountries(query, isReset = false) {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
@@ -2251,7 +2291,9 @@ var Iti = class {
       this.highlightedItem.setAttribute("aria-selected", "true");
       const activeDescendant = this.highlightedItem.getAttribute("id") || "";
       this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
-      this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      if (this.options.countrySearch) {
+        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      }
     }
     if (shouldFocus) {
       this.highlightedItem.focus();
@@ -2408,10 +2450,14 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
-    this.searchInput.removeAttribute("aria-activedescendant");
+    if (this.options.countrySearch) {
+      this.searchInput.removeAttribute("aria-activedescendant");
+    }
     this.dropdownArrow.classList.remove("iti__arrow--up");
     document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-    this.searchInput.removeEventListener("input", this._handleSearchChange);
+    if (this.options.countrySearch) {
+      this.searchInput.removeEventListener("input", this._handleSearchChange);
+    }
     document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
@@ -2722,7 +2768,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.3.2"
+    version: "23.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;