intl-tel-input 18.3.5 → 18.5.0

package/demo.html

@@ -21,8 +21,14 @@
         // allowDropdown: false,
         // autoInsertDialCode: true,
         // autoPlaceholder: "off",
-        // dropdownContainer: document.body,
+        // countrySearch: true,
+        // customContainer: "test",
+        // customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
+        //   return "e.g. " + selectedCountryPlaceholder;
+        // },
+        // dropdownContainer: document.querySelector('#custom-container'),
         // excludeCountries: ["us"],
+        // fixDropdownWidth: true,
         // formatOnDisplay: false,
         // geoIpLookup: function(callback) {
         //   fetch("https://ipapi.co/json")

package/grunt/tmpl/sprite.scss.mustache

@@ -19,7 +19,7 @@
     }
   }
 
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (min-resolution: 2x) {
     background-size: {{spritesheet.px.width}} {{spritesheet.px.height}};
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "18.3.5",
+  "version": "18.5.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/src/css/intlTelInput.scss

@@ -60,9 +60,9 @@ $mobilePopupMargin: 30px !default;
   }
 
   // specify types to increase specificity e.g. to override bootstrap v2.3
-  input,
-  input[type="text"],
-  input[type="tel"] {
+  input.iti__tel-input,
+  input.iti__tel-input[type="text"],
+  input.iti__tel-input[type="tel"] {
     position: relative;
     // input is bottom level, below selected flag and dropdown
     z-index: 0;
@@ -129,35 +129,24 @@ $mobilePopupMargin: 30px !default;
   }
 
   // the dropdown
-  &__country-list {
+  &__dropdown-content {
     position: absolute;
     // popup so render above everything else
     z-index: 2;
 
-    // override default list styles
-    list-style: none;
-
     // place menu above the input element
     &--dropup {
       bottom: 100%;
       margin-bottom: (-$borderWidth);
     }
 
-    padding: 0;
     // margin-left to compensate for the padding on the parent
-    margin: 0 0 0 (-$borderWidth);
+    margin-left: (-$borderWidth);
 
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
     background-color: white;
     border: $borderWidth solid $greyBorder;
 
-    // don't let the contents wrap AKA the container will be as wide as the contents
-    white-space: nowrap;
-    // except on small screens, where we force the dropdown width to match the input
-    @media (max-width: 500px) {
-      white-space: normal;
-    }
-
     max-height: 200px;
     overflow-y: scroll;
 
@@ -167,6 +156,25 @@ $mobilePopupMargin: 30px !default;
     // Stackoverflow question about it: https://stackoverflow.com/questions/33601165/scrolling-slow-on-mobile-ios-when-using-overflowscroll
     -webkit-overflow-scrolling: touch;
   }
+  &__search-input {
+    width: 100%;
+    border-width: 0;
+  }
+  &__country-list {
+    // override default list styles
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  &--flexible-dropdown-width &__country-list {
+    // don't let the contents wrap AKA the container will be as wide as the contents
+    white-space: nowrap;
+
+    // except on small screens, where we force the dropdown width to match the input
+    @media (max-width: 500px) {
+      white-space: normal;
+    }
+  }
 
   // dropdown flags need consistent width, so wrap in a container
   &__flag-box {
@@ -212,9 +220,9 @@ $mobilePopupMargin: 30px !default;
   // these settings are independent of each other, but both move selected flag to left of input
   &--allow-dropdown,
   &--separate-dial-code {
-    input,
-    input[type="text"],
-    input[type="tel"] {
+    input.iti__tel-input,
+    input.iti__tel-input[type="text"],
+    input.iti__tel-input[type="tel"] {
       padding-right: $inputPadding;
       padding-left: $selectedFlagArrowWidth + $inputPadding;
       margin-left: 0;
@@ -245,8 +253,8 @@ $mobilePopupMargin: 30px !default;
       }
     }
     // disable hover state when input is disabled
-    input[disabled] + .iti__flag-container:hover,
-    input[readonly] + .iti__flag-container:hover {
+    .iti__flag-container:has(+ input[disabled]):hover,
+    .iti__flag-container:has(+ input[readonly]):hover {
       cursor: default;
       .iti__selected-flag {
         background-color: transparent;
@@ -284,9 +292,9 @@ $mobilePopupMargin: 30px !default;
   }
 }
 
-// overrides for mobile popup (note: .iti-fullscreen-popup class is applied on body)
-.iti-fullscreen-popup .iti {
-  &--container {
+// overrides for mobile popup
+.iti--fullscreen-popup {
+  &.iti--container {
     background-color: rgba(0, 0, 0, 0.5);
     top: 0;
     bottom: 0;
@@ -299,11 +307,11 @@ $mobilePopupMargin: 30px !default;
     flex-direction: column;
     justify-content: center;
   }
-  &__country-list {
+  .iti__dropdown-content {
     max-height: 100%;
     position: relative; // override needed in order to get full-width working properly
   }
-  &__country {
+  .iti__country {
     padding: 10px 10px;
     // increase line height because dropdown copy is v likely to overflow on mobile and when it does it needs to be well spaced
     line-height: 1.5em;
@@ -321,7 +329,7 @@ $mobilePopupMargin: 30px !default;
   background-color: #dbdbdb;
   background-position: $flagWidth 0;
 
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (min-resolution: 2x) {
     background-image: url("#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}#{$flagsImageQuery}");
   }
 }

package/src/css/sprite.scss

@@ -19,7 +19,7 @@
     }
   }
 
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (min-resolution: 2x) {
     background-size: 5762px 15px;
   }
 

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
@@ -30,6 +32,8 @@ const defaults = {
   dropdownContainer: null,
   // 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,
   // format the input value during initialisation and on setNumber
   formatOnDisplay: true,
   // geoIp lookup function
@@ -126,6 +130,17 @@ class Iti {
   }
 
   _init() {
+    // if showing fullscreen popup, do not fix the width
+    if (this.options.useFullscreenPopup) {
+      this.options.fixDropdownWidth = false;
+      this.options.countrySearch = false;
+    }
+
+    // when search enabled, we must fix the width else it would change with different results
+    if (this.options.countrySearch) {
+      this.options.fixDropdownWidth = true;
+    }
+
     // if in nationalMode, do not insert dial codes
     if (this.options.nationalMode) {
       this.options.autoInsertDialCode = false;
@@ -144,14 +159,9 @@ class Iti {
       this.options.showFlags = true;
     }
 
-    if (this.options.useFullscreenPopup) {
-      // trigger the mobile dropdown css
-      document.body.classList.add("iti-fullscreen-popup");
-
-      // on mobile, we want a full screen dropdown, so we must append it to the body
-      if (!this.options.dropdownContainer) {
-        this.options.dropdownContainer = document.body;
-      }
+    // on mobile, we want a full screen dropdown, so we must append it to the body
+    if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
+      this.options.dropdownContainer = document.body;
     }
 
     // check if input has one parent with RTL
@@ -355,6 +365,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
@@ -372,7 +384,10 @@ class Iti {
       showFlags,
       customContainer,
       hiddenInput,
-      dropdownContainer
+      dropdownContainer,
+      fixDropdownWidth,
+      useFullscreenPopup,
+      countrySearch
     } = this.options;
 
     // containers (mostly for positioning)
@@ -386,6 +401,9 @@ class Iti {
     if (showFlags) {
       parentClass += " iti--show-flags";
     }
+    if (!fixDropdownWidth) {
+      parentClass += " iti--flexible-dropdown-width";
+    }
     if (customContainer) {
       parentClass += ` ${customContainer}`;
     }
@@ -454,14 +472,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",
@@ -476,10 +514,15 @@ class Iti {
 
       // create dropdownContainer markup
       if (dropdownContainer) {
-        this.dropdown = this._createEl("div", { class: "iti iti--container" });
-        this.dropdown.appendChild(this.countryList);
+        const fullscreenClass = useFullscreenPopup
+          ? "iti--fullscreen-popup"
+          : "";
+        this.dropdown = this._createEl("div", {
+          class: `iti iti--container ${fullscreenClass}`
+        });
+        this.dropdown.appendChild(this.dropdownContent);
       } else {
-        this.flagsContainer.appendChild(this.countryList);
+        this.flagsContainer.appendChild(this.dropdownContent);
       }
     }
 
@@ -502,28 +545,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:
@@ -625,7 +679,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();
@@ -642,7 +696,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
       ) {
@@ -651,14 +705,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();
@@ -802,13 +856,20 @@ class Iti {
 
   // show the dropdown
   _showDropdown() {
-    this.countryList.classList.remove("iti__hide");
+    if (this.options.fixDropdownWidth) {
+      this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
+    }
+    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);
     }
@@ -843,7 +904,7 @@ 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 <
@@ -853,7 +914,7 @@ class Iti {
       // 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,
+        this.dropdownContent,
         "iti__country-list--dropup",
         !dropdownFitsBelow && dropdownFitsAbove
       );
@@ -932,7 +993,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
@@ -941,28 +1002,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);
@@ -976,23 +1037,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);
+      }
     }
   }
 
@@ -1007,9 +1130,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);
@@ -1333,7 +1454,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");
 
@@ -1342,6 +1463,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
@@ -1367,7 +1491,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");
       });
     });