intl-tel-input 18.4.0 → 18.5.1

package/src/js/intlTelInput.js

@@ -22,6 +22,8 @@ const defaults = {
   autoInsertDialCode: false,
   // 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,
   // modify the parentClass
   customContainer: "",
   // modify the auto placeholder
@@ -133,6 +135,11 @@ class Iti {
       this.options.fixDropdownWidth = false;
     }
 
+    // when search enabled, we must fix the width else it would change with different results
+    if (this.options.countrySearch && !this.options.useFullscreenPopup) {
+      this.options.fixDropdownWidth = true;
+    }
+
     // if in nationalMode, do not insert dial codes
     if (this.options.nationalMode) {
       this.options.autoInsertDialCode = false;
@@ -357,6 +364,8 @@ class Iti {
 
   // generate all of the markup for the plugin: the selected flag overlay, and the dropdown
   _generateMarkup() {
+    this.telInput.classList.add("iti__tel-input");
+
     // if autocomplete does not exist on the element and its form, then
     // prevent autocomplete as there's no safe, cross-browser event we can react to, so it can
     // easily put the plugin in an inconsistent state e.g. the wrong flag selected for the
@@ -376,7 +385,8 @@ class Iti {
       hiddenInput,
       dropdownContainer,
       fixDropdownWidth,
-      useFullscreenPopup
+      useFullscreenPopup,
+      countrySearch
     } = this.options;
 
     // containers (mostly for positioning)
@@ -461,14 +471,34 @@ class Iti {
         this.selectedFlag
       );
 
-      // country dropdown: preferred countries, then divider, then all countries
-      this.countryList = this._createEl("ul", {
-        class: "iti__country-list iti__hide",
-        id: `iti-${this.id}__country-listbox`,
-        role: "listbox",
-        "aria-label": "List of countries"
+      this.dropdownContent = this._createEl("div", {
+        class: "iti__dropdown-content iti__hide"
       });
-      if (this.preferredCountries.length) {
+
+      if (countrySearch) {
+        this.searchInput = this._createEl(
+          "input",
+          {
+            type: "text",
+            class: "iti__search-input",
+            placeholder: "Search"
+          },
+          this.dropdownContent
+        );
+      }
+
+      // country list: preferred countries, then divider, then all countries
+      this.countryList = this._createEl(
+        "ul",
+        {
+          class: "iti__country-list",
+          id: `iti-${this.id}__country-listbox`,
+          role: "listbox",
+          "aria-label": "List of countries"
+        },
+        this.dropdownContent
+      );
+      if (this.preferredCountries.length && !countrySearch) {
         this._appendListItems(this.preferredCountries, "iti__preferred", true);
         this._createEl(
           "li",
@@ -483,11 +513,17 @@ class Iti {
 
       // create dropdownContainer markup
       if (dropdownContainer) {
-        const fullscreenClass = useFullscreenPopup ? "iti--fullscreen-popup" : "";
-        this.dropdown = this._createEl("div", { class: `iti iti--container ${fullscreenClass}` });
-        this.dropdown.appendChild(this.countryList);
+        let dropdownClasses = "iti iti--container";
+        if (useFullscreenPopup) {
+          dropdownClasses += " iti--fullscreen-popup";
+        }
+        if (countrySearch) {
+          dropdownClasses += " iti--country-search";
+        }
+        this.dropdown = this._createEl("div", { class: dropdownClasses });
+        this.dropdown.appendChild(this.dropdownContent);
       } else {
-        this.flagsContainer.appendChild(this.countryList);
+        this.flagsContainer.appendChild(this.dropdownContent);
       }
     }
 
@@ -510,28 +546,39 @@ class Iti {
     }
   }
 
-  // add a country <li> to the countryList <ul> container
+  // for each of the passed countries: add a country <li> to the countryList <ul> container
   _appendListItems(countries, className, preferred) {
-    // we create so many DOM elements, it is faster to build a temp string
-    // and then add everything to the DOM in one go at the end
-    let tmp = "";
-    // for each country
     for (let i = 0; i < countries.length; i++) {
       const c = countries[i];
       const idSuffix = preferred ? "-preferred" : "";
-      // open the list item
-      tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-${this.id}__item-${c.iso2}${idSuffix}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}' aria-selected='false'>`;
+
+      const listItem = this._createEl(
+        "li",
+        {
+          id: `iti-${this.id}__item-${c.iso2}${idSuffix}`,
+          class: `iti__country ${className}`,
+          tabindex: "-1",
+          role: "option",
+          "data-dial-code": c.dialCode,
+          "data-country-code": c.iso2,
+          "aria-selected": "false"
+        },
+        this.countryList
+      );
+      // store this for later use e.g. country search filtering
+      c.node = listItem;
+
+      let content = "";
       // add the flag
       if (this.options.showFlags) {
-        tmp += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
+        content += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
       }
       // and the country name and dial code
-      tmp += `<span class='iti__country-name'>${c.name}</span>`;
-      tmp += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
-      // close the list item
-      tmp += "</li>";
+      content += `<span class='iti__country-name'>${c.name}</span>`;
+      content += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
+
+      listItem.insertAdjacentHTML("beforeend", content);
     }
-    this.countryList.insertAdjacentHTML("beforeend", tmp);
   }
 
   // set the initial state of the input value and the selected flag by:
@@ -633,7 +680,7 @@ class Iti {
     // close it again
     this._handleLabelClick = (e) => {
       // if the dropdown is closed, then focus the input, else ignore the click
-      if (this.countryList.classList.contains("iti__hide")) {
+      if (this.dropdownContent.classList.contains("iti__hide")) {
         this.telInput.focus();
       } else {
         e.preventDefault();
@@ -650,7 +697,7 @@ class Iti {
       // else let it bubble up to the top ("click-off-to-close" listener)
       // we cannot just stopPropagation as it may be needed to close another instance
       if (
-        this.countryList.classList.contains("iti__hide") &&
+        this.dropdownContent.classList.contains("iti__hide") &&
         !this.telInput.disabled &&
         !this.telInput.readOnly
       ) {
@@ -659,14 +706,14 @@ class Iti {
     };
     this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
 
-    // open dropdown list if currently focused
+    // open dropdown if selected flag is focused and they press up/down/space/enter
     this._handleFlagsContainerKeydown = (e) => {
-      const isDropdownHidden = this.countryList.classList.contains("iti__hide");
+      const isDropdownHidden =
+        this.dropdownContent.classList.contains("iti__hide");
 
       if (
         isDropdownHidden &&
-        ["ArrowUp", "Up", "ArrowDown", "Down", " ", "Enter"].indexOf(e.key) !==
-          -1
+        ["ArrowUp", "ArrowDown", " ", "Enter"].includes(e.key)
       ) {
         // prevent form from being submitted if "ENTER" was pressed
         e.preventDefault();
@@ -811,15 +858,19 @@ class Iti {
   // show the dropdown
   _showDropdown() {
     if (this.options.fixDropdownWidth) {
-      this.countryList.style.width = `${this.telInput.offsetWidth}px`;
+      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
     }
-    this.countryList.classList.remove("iti__hide");
+    this.dropdownContent.classList.remove("iti__hide");
     this.selectedFlag.setAttribute("aria-expanded", "true");
 
     this._setDropdownPosition();
 
-    // update highlighting and scroll to active list item
-    if (this.activeItem) {
+    if (this.options.countrySearch) {
+      // start by highlighting the first item in the list
+      this._highlightListItem(this.countryList.firstElementChild, false);
+      this.searchInput.focus();
+    } else if (this.activeItem) {
+      // update highlighting and scroll to active list item
       this._highlightListItem(this.activeItem, false);
       this._scrollTo(this.activeItem, true);
     }
@@ -854,19 +905,21 @@ class Iti {
       const windowTop =
         window.pageYOffset || document.documentElement.scrollTop;
       const inputTop = pos.top + windowTop;
-      const dropdownHeight = this.countryList.offsetHeight;
+      const dropdownHeight = this.dropdownContent.offsetHeight;
       // dropdownFitsBelow = (dropdownBottom < windowBottom)
       const dropdownFitsBelow =
         inputTop + this.telInput.offsetHeight + dropdownHeight <
         windowTop + window.innerHeight;
       const dropdownFitsAbove = inputTop - dropdownHeight > windowTop;
+      // dont allow positioning above when country search enabled as the search box jumps around as you filter countries
+      const positionDropdownAboveInput = !this.options.countrySearch && !dropdownFitsBelow && dropdownFitsAbove;
 
       // by default, the dropdown will be below the input. If we want to position it above the
       // input, we add the dropup class.
       this._toggleClass(
-        this.countryList,
-        "iti__country-list--dropup",
-        !dropdownFitsBelow && dropdownFitsAbove
+        this.dropdownContent,
+        "iti__dropdown-content--dropup",
+        positionDropdownAboveInput
       );
 
       // if dropdownContainer is enabled, calculate postion
@@ -874,7 +927,7 @@ class Iti {
         // by default the dropdown will be directly over the input because it's not in the flow.
         // If we want to position it below, we need to add some extra top value.
         const extraTop =
-          !dropdownFitsBelow && dropdownFitsAbove
+          positionDropdownAboveInput
             ? 0
             : this.telInput.offsetHeight;
 
@@ -943,7 +996,7 @@ class Iti {
       this._handleClickOffToClose
     );
 
-    // listen for up/down scrolling, enter to select, or letters to jump to country name.
+    // listen for up/down scrolling, enter to select, or escape to close
     // use keydown as keypress doesn't fire for non-char keys and we want to catch if they
     // just hit down and hold it to scroll down (no keyup event).
     // listen on the document because that's where key events are triggered if no input has focus
@@ -952,28 +1005,28 @@ class Iti {
     this._handleKeydownOnDropdown = (e) => {
       // prevent down key from scrolling the whole page,
       // and enter key from submitting a form etc
-      e.preventDefault();
+      if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
 
-      // up and down to navigate
-      if (
-        e.key === "ArrowUp" ||
-        e.key === "Up" ||
-        e.key === "ArrowDown" ||
-        e.key === "Down"
-      ) {
-        this._handleUpDownKey(e.key);
-      }
-      // enter to select
-      else if (e.key === "Enter") {
-        this._handleEnterKey();
-      }
-      // esc to close
-      else if (e.key === "Escape") {
-        this._closeDropdown();
+        // up and down to navigate
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+          this._handleUpDownKey(e.key);
+        }
+        // enter to select
+        else if (e.key === "Enter") {
+          this._handleEnterKey();
+        }
+        // esc to close
+        else if (e.key === "Escape") {
+          this._closeDropdown();
+        }
       }
+
       // alpha chars to perform search
       // regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
-      else if (/^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+        e.stopPropagation();
         // jump to countries that start with the query string
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -987,23 +1040,85 @@ class Iti {
       }
     };
     document.addEventListener("keydown", this._handleKeydownOnDropdown);
+
+    if (this.options.countrySearch) {
+      const doFilter = () => {
+        const inputQuery = this.searchInput.value.trim();
+        if (inputQuery) {
+          this._filterCountries(inputQuery.toLowerCase());
+        } else {
+          this._filterCountries(null, true);
+        }
+      };
+
+      let keyupTimer = null;
+      this._handleSearchChange = () => {
+        // filtering country nodes is expensive (lots of DOM manipulation), so rate limit it
+        if (keyupTimer) {
+          clearTimeout(keyupTimer);
+        }
+        keyupTimer = setTimeout(() => {
+          doFilter();
+          keyupTimer = null;
+        }, 100);
+      };
+      this.searchInput.addEventListener("input", this._handleSearchChange);
+
+      // stop propagation on search input click, so doesn't trigger click-off-to-close listener
+      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
+  }
+
+  _filterCountries(query, isReset = false) {
+    let isFirst = true;
+    this.countryList.innerHTML = "";
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const nameLower = c.name.toLowerCase();
+      const fullDialCode = `+${c.dialCode}`;
+      if (
+        isReset ||
+        nameLower.includes(query) ||
+        fullDialCode.includes(query)
+      ) {
+        this.countryList.appendChild(c.node);
+        // highlight the first item
+        if (isFirst) {
+          this._highlightListItem(c.node, false);
+          isFirst = false;
+        }
+      }
+    }
   }
 
   // highlight the next/prev item in the list (and ensure it is visible)
   _handleUpDownKey(key) {
     let next =
-      key === "ArrowUp" || key === "Up"
+      key === "ArrowUp"
         ? this.highlightedItem.previousElementSibling
         : this.highlightedItem.nextElementSibling;
     if (next) {
       // skip the divider
       if (next.classList.contains("iti__divider")) {
         next =
-          key === "ArrowUp" || key === "Up"
+          key === "ArrowUp"
             ? next.previousElementSibling
             : next.nextElementSibling;
       }
-      this._highlightListItem(next, true);
+    } else if (this.countryList.childElementCount > 1) {
+      // otherwise, we must be at the end, so loop round again
+      next =
+        key === "ArrowUp"
+          ? this.countryList.lastElementChild
+          : this.countryList.firstElementChild;
+    }
+    if (next) {
+      // if country search enabled, dont lose focus from the search input on up/down
+      const doFocus = !this.options.countrySearch;
+      this._highlightListItem(next, doFocus);
+      if (this.options.countrySearch) {
+        this._scrollTo(next, false);
+      }
     }
   }
 
@@ -1018,9 +1133,7 @@ class Iti {
   _searchForCountry(query) {
     for (let i = 0; i < this.countries.length; i++) {
       if (this._startsWith(this.countries[i].name, query)) {
-        const listItem = this.countryList.querySelector(
-          `#iti-${this.id}__item-${this.countries[i].iso2}`
-        );
+        const listItem = this.countries[i].node;
         // update highlighting and scroll
         this._highlightListItem(listItem, false);
         this._scrollTo(listItem, true);
@@ -1344,7 +1457,7 @@ class Iti {
 
   // close the dropdown and unbind any listeners
   _closeDropdown() {
-    this.countryList.classList.add("iti__hide");
+    this.dropdownContent.classList.add("iti__hide");
     this.selectedFlag.setAttribute("aria-expanded", "false");
     this.selectedFlag.removeAttribute("aria-activedescendant");
 
@@ -1353,6 +1466,9 @@ class Iti {
 
     // unbind key events
     document.removeEventListener("keydown", this._handleKeydownOnDropdown);
+    if (this.options.countrySearch) {
+      this.searchInput.removeEventListener("input", this._handleSearchChange);
+    }
     document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
@@ -1378,7 +1494,7 @@ class Iti {
 
   // check if an element is visible within it's container, else scroll until it is
   _scrollTo(element, middle) {
-    const container = this.countryList;
+    const container = this.dropdownContent;
     // windowTop from https://stackoverflow.com/a/14384091/217866
     const windowTop = window.pageYOffset || document.documentElement.scrollTop;
     const containerHeight = container.offsetHeight;

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

@@ -58,10 +58,10 @@ describe("dropdown shortcuts: init plugin (with nationalMode=false, autoInsertDi
       expect(getListElement()).not.toBeVisible();
     });
 
-    it("pressing up while on the top item does not change the highlighted item", function() {
+    it("pressing up while on the top item highlights the bottom item", function() {
       triggerKeyOnBody("ArrowUp");
-      var topItem = getListElement().find("li.iti__country:eq(0)");
-      expect(topItem).toHaveClass("iti__highlight");
+      var lastItem = getListElement().find("li.iti__country:last");
+      expect(lastItem).toHaveClass("iti__highlight");
     });
 
     it("pressing z highlights Zambia", function() {
@@ -82,23 +82,22 @@ describe("dropdown shortcuts: init plugin (with nationalMode=false, autoInsertDi
 
     describe("typing z then i then DOWN", function() {
 
-      var lastItem;
-
       beforeEach(function() {
-        lastItem = getListElement().find("li.iti__country:last");
         triggerKeyOnBody("z");
         triggerKeyOnBody("i");
         triggerKeyOnBody("ArrowDown");
       });
 
       it("highlights the last item, which is Åland Islands", function() {
+        var lastItem = getListElement().find("li.iti__country:last");
         expect(lastItem).toHaveClass("iti__highlight");
         expect(lastItem.attr("data-country-code")).toEqual("ax");
       });
 
-      it("pressing down while on the last item does not change the highlighted item", function() {
+      it("pressing down while on the last item highlights the first item", function() {
         triggerKeyOnBody("ArrowDown");
-        expect(lastItem).toHaveClass("iti__highlight");
+        var topItem = getListElement().find("li.iti__country:eq(0)");
+        expect(topItem).toHaveClass("iti__highlight");
       });
     });