intl-tel-input 25.8.1 → 25.8.3

package/package.json

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

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/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"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` 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 `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.1/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"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` 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 `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.8.3/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

@@ -1624,8 +1624,8 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Selected country",
-  noCountrySelected: "No country selected",
+  selectedCountryAriaLabel: "Change country, selected ${country}",
+  noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
@@ -1990,7 +1990,7 @@ var Iti = class _Iti {
             type: "button",
             class: "iti__selected-country",
             "aria-expanded": "false",
-            "aria-label": this.options.i18n.selectedCountryAriaLabel,
+            "aria-label": this.options.i18n.noCountrySelected,
             "aria-haspopup": "dialog",
             "aria-controls": `iti-${this.id}__dropdown-content`
           },
@@ -2006,12 +2006,15 @@ var Iti = class _Iti {
           this.countryContainer
         );
       }
-      const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
-      this.selectedCountryA11yText = createEl(
-        "span",
-        { class: "iti__a11y-text" },
-        this.selectedCountryInner
+      const selectedCountryPrimary = createEl(
+        "div",
+        { class: "iti__selected-country-primary" },
+        this.selectedCountry
+      );
+      this.selectedCountryInner = createEl(
+        "div",
+        { class: "iti__flag" },
+        selectedCountryPrimary
       );
       if (allowDropdown) {
         this.dropdownArrow = createEl(
@@ -2023,7 +2026,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2265,7 +2268,8 @@ var Iti = class _Iti {
       label.addEventListener("click", this._handleLabelClick);
     }
     this._handleClickSelectedCountry = () => {
-      if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
+      const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
+      if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
         this._openDropdown();
       }
     };
@@ -2480,17 +2484,19 @@ var Iti = class _Iti {
       }
     };
     this.countryList.addEventListener("click", this._handleClickCountryList);
-    let isOpening = true;
-    this._handleClickOffToClose = () => {
-      if (!isOpening) {
+    this._handleClickOffToClose = (e) => {
+      const target = e.target;
+      const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
+      if (!clickedInsideDropdown) {
         this._closeDropdown();
       }
-      isOpening = false;
     };
-    document.documentElement.addEventListener(
-      "click",
-      this._handleClickOffToClose
-    );
+    setTimeout(() => {
+      document.documentElement.addEventListener(
+        "click",
+        this._handleClickOffToClose
+      );
+    }, 0);
     let query = "";
     let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
@@ -2543,14 +2549,12 @@ var Iti = class _Iti {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
-      this._handleSearchClear = (e) => {
-        e.stopPropagation();
+      this._handleSearchClear = () => {
         this.searchInput.value = "";
         this.searchInput.focus();
         doFilter();
       };
       this.searchClearButton.addEventListener("click", this._handleSearchClear);
-      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2769,20 +2773,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let a11yText = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
-        a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
+    if (this.selectedCountry) {
+      const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
+      let ariaLabel, title;
+      if (iso2) {
+        title = this.selectedCountryData.name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
       } else {
-        flagClass = "iti__flag iti__globe";
-        a11yText = i18n.noCountrySelected;
+        title = i18n.noCountrySelected;
+        ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
-      this.selectedCountryA11yText.textContent = a11yText;
+      this.selectedCountry.setAttribute("title", title);
+      this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2832,20 +2836,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = "Unknown";
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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 countryContainer and selectedCountry
@@ -3271,7 +3261,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.1"
+    version: "25.8.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -393,7 +393,6 @@ declare module "intl-tel-input" {
         private countryContainer;
         private selectedCountry;
         private selectedCountryInner;
-        private selectedCountryA11yText;
         private selectedDialCode;
         private dropdownArrow;
         private dropdownContent;
@@ -471,7 +470,6 @@ declare module "intl-tel-input" {
         private _setCountry;
         private _updateInputPadding;
         private _updateMaxLength;
-        private _setSelectedCountryTitleAttribute;
         private _getHiddenSelectedCountryWidth;
         private _updatePlaceholder;
         private _selectListItem;

package/react/build/IntlTelInput.js

@@ -1588,8 +1588,8 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Selected country",
-  noCountrySelected: "No country selected",
+  selectedCountryAriaLabel: "Change country, selected ${country}",
+  noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
@@ -1954,7 +1954,7 @@ var Iti = class _Iti {
             type: "button",
             class: "iti__selected-country",
             "aria-expanded": "false",
-            "aria-label": this.options.i18n.selectedCountryAriaLabel,
+            "aria-label": this.options.i18n.noCountrySelected,
             "aria-haspopup": "dialog",
             "aria-controls": `iti-${this.id}__dropdown-content`
           },
@@ -1970,12 +1970,15 @@ var Iti = class _Iti {
           this.countryContainer
         );
       }
-      const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
-      this.selectedCountryA11yText = createEl(
-        "span",
-        { class: "iti__a11y-text" },
-        this.selectedCountryInner
+      const selectedCountryPrimary = createEl(
+        "div",
+        { class: "iti__selected-country-primary" },
+        this.selectedCountry
+      );
+      this.selectedCountryInner = createEl(
+        "div",
+        { class: "iti__flag" },
+        selectedCountryPrimary
       );
       if (allowDropdown) {
         this.dropdownArrow = createEl(
@@ -1987,7 +1990,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2229,7 +2232,8 @@ var Iti = class _Iti {
       label.addEventListener("click", this._handleLabelClick);
     }
     this._handleClickSelectedCountry = () => {
-      if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
+      const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
+      if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
         this._openDropdown();
       }
     };
@@ -2444,17 +2448,19 @@ var Iti = class _Iti {
       }
     };
     this.countryList.addEventListener("click", this._handleClickCountryList);
-    let isOpening = true;
-    this._handleClickOffToClose = () => {
-      if (!isOpening) {
+    this._handleClickOffToClose = (e) => {
+      const target = e.target;
+      const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
+      if (!clickedInsideDropdown) {
         this._closeDropdown();
       }
-      isOpening = false;
     };
-    document.documentElement.addEventListener(
-      "click",
-      this._handleClickOffToClose
-    );
+    setTimeout(() => {
+      document.documentElement.addEventListener(
+        "click",
+        this._handleClickOffToClose
+      );
+    }, 0);
     let query = "";
     let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
@@ -2507,14 +2513,12 @@ var Iti = class _Iti {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
-      this._handleSearchClear = (e) => {
-        e.stopPropagation();
+      this._handleSearchClear = () => {
         this.searchInput.value = "";
         this.searchInput.focus();
         doFilter();
       };
       this.searchClearButton.addEventListener("click", this._handleSearchClear);
-      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2733,20 +2737,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let a11yText = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
-        a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
+    if (this.selectedCountry) {
+      const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
+      let ariaLabel, title;
+      if (iso2) {
+        title = this.selectedCountryData.name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
       } else {
-        flagClass = "iti__flag iti__globe";
-        a11yText = i18n.noCountrySelected;
+        title = i18n.noCountrySelected;
+        ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
-      this.selectedCountryA11yText.textContent = a11yText;
+      this.selectedCountry.setAttribute("title", title);
+      this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2796,20 +2800,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = "Unknown";
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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 countryContainer and selectedCountry
@@ -3235,7 +3225,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.1"
+    version: "25.8.3"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1624,8 +1624,8 @@ var countries_default = countryTranslations;
 
 // src/js/intl-tel-input/i18n/en/interface.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Selected country",
-  noCountrySelected: "No country selected",
+  selectedCountryAriaLabel: "Change country, selected ${country}",
+  noCountrySelected: "Select country",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
@@ -1990,7 +1990,7 @@ var Iti = class _Iti {
             type: "button",
             class: "iti__selected-country",
             "aria-expanded": "false",
-            "aria-label": this.options.i18n.selectedCountryAriaLabel,
+            "aria-label": this.options.i18n.noCountrySelected,
             "aria-haspopup": "dialog",
             "aria-controls": `iti-${this.id}__dropdown-content`
           },
@@ -2006,12 +2006,15 @@ var Iti = class _Iti {
           this.countryContainer
         );
       }
-      const selectedCountryPrimary = createEl("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      this.selectedCountryInner = createEl("div", { class: "iti__flag" }, selectedCountryPrimary);
-      this.selectedCountryA11yText = createEl(
-        "span",
-        { class: "iti__a11y-text" },
-        this.selectedCountryInner
+      const selectedCountryPrimary = createEl(
+        "div",
+        { class: "iti__selected-country-primary" },
+        this.selectedCountry
+      );
+      this.selectedCountryInner = createEl(
+        "div",
+        { class: "iti__flag" },
+        selectedCountryPrimary
       );
       if (allowDropdown) {
         this.dropdownArrow = createEl(
@@ -2023,7 +2026,7 @@ var Iti = class _Iti {
       if (separateDialCode) {
         this.selectedDialCode = createEl(
           "div",
-          { class: "iti__selected-dial-code", "aria-hidden": "true", dir: "ltr" },
+          { class: "iti__selected-dial-code", dir: "ltr" },
           this.selectedCountry
         );
       }
@@ -2265,7 +2268,8 @@ var Iti = class _Iti {
       label.addEventListener("click", this._handleLabelClick);
     }
     this._handleClickSelectedCountry = () => {
-      if (this.dropdownContent.classList.contains("iti__hide") && !this.telInput.disabled && !this.telInput.readOnly) {
+      const dropdownClosed = this.dropdownContent.classList.contains("iti__hide");
+      if (dropdownClosed && !this.telInput.disabled && !this.telInput.readOnly) {
         this._openDropdown();
       }
     };
@@ -2480,17 +2484,19 @@ var Iti = class _Iti {
       }
     };
     this.countryList.addEventListener("click", this._handleClickCountryList);
-    let isOpening = true;
-    this._handleClickOffToClose = () => {
-      if (!isOpening) {
+    this._handleClickOffToClose = (e) => {
+      const target = e.target;
+      const clickedInsideDropdown = !!target.closest(`#iti-${this.id}__dropdown-content`);
+      if (!clickedInsideDropdown) {
         this._closeDropdown();
       }
-      isOpening = false;
     };
-    document.documentElement.addEventListener(
-      "click",
-      this._handleClickOffToClose
-    );
+    setTimeout(() => {
+      document.documentElement.addEventListener(
+        "click",
+        this._handleClickOffToClose
+      );
+    }, 0);
     let query = "";
     let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
@@ -2543,14 +2549,12 @@ var Iti = class _Iti {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
-      this._handleSearchClear = (e) => {
-        e.stopPropagation();
+      this._handleSearchClear = () => {
         this.searchInput.value = "";
         this.searchInput.focus();
         doFilter();
       };
       this.searchClearButton.addEventListener("click", this._handleSearchClear);
-      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
@@ -2769,20 +2773,20 @@ var Iti = class _Iti {
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
-    if (this.selectedCountryInner) {
-      let flagClass = "";
-      let a11yText = "";
-      if (iso2 && showFlags) {
-        flagClass = `iti__flag iti__${iso2}`;
-        a11yText = `${this.selectedCountryData.name} +${this.selectedCountryData.dialCode}`;
+    if (this.selectedCountry) {
+      const flagClass = iso2 && showFlags ? `iti__flag iti__${iso2}` : "iti__flag iti__globe";
+      let ariaLabel, title;
+      if (iso2) {
+        title = this.selectedCountryData.name;
+        ariaLabel = i18n.selectedCountryAriaLabel.replace("${country}", this.selectedCountryData.name);
       } else {
-        flagClass = "iti__flag iti__globe";
-        a11yText = i18n.noCountrySelected;
+        title = i18n.noCountrySelected;
+        ariaLabel = i18n.noCountrySelected;
       }
       this.selectedCountryInner.className = flagClass;
-      this.selectedCountryA11yText.textContent = a11yText;
+      this.selectedCountry.setAttribute("title", title);
+      this.selectedCountry.setAttribute("aria-label", ariaLabel);
     }
-    this._setSelectedCountryTitleAttribute(iso2, separateDialCode);
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
@@ -2832,20 +2836,6 @@ var Iti = class _Iti {
       }
     }
   }
-  _setSelectedCountryTitleAttribute(iso2 = null, separateDialCode) {
-    if (!this.selectedCountry) {
-      return;
-    }
-    let title;
-    if (iso2 && !separateDialCode) {
-      title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (iso2) {
-      title = this.selectedCountryData.name;
-    } else {
-      title = "Unknown";
-    }
-    this.selectedCountry.setAttribute("title", title);
-  }
   //* 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 countryContainer and selectedCountry
@@ -3271,7 +3261,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.8.1"
+    version: "25.8.3"
   }
 );
 var intl_tel_input_default = intlTelInput;