intl-tel-input 25.7.0 → 25.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.7.0",
+  "version": "25.8.1",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -45,9 +45,8 @@
     "esbuild": "^0.25.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jasmine": "^4.1.3",
-    "eslint-plugin-jest": "^28.5.0",
+  "eslint-plugin-import": "^2.29.1",
+  "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "flag-icons": "^7.2.3",
@@ -57,13 +56,11 @@
     "grunt-bump": "^0.8.0",
     "grunt-cli": "^1.2.0",
     "grunt-contrib-connect": "^5.0.0",
-    "grunt-contrib-cssmin": "^5.0.0",
-    "grunt-contrib-jasmine": "^4.0.0",
+  "grunt-contrib-cssmin": "^5.0.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-replace": "^2.0.2",
     "grunt-sass": "^3.0.0",
-    "grunt-shell": "^4.0.0",
-    "jasmine-jquery": "^2.1.1",
+  "grunt-shell": "^4.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jquery": "^3.1.1",
@@ -98,8 +95,7 @@
   },
   "homepage": "https://intl-tel-input.com",
   "scripts": {
-    "test": "grunt travis && jest",
-    "jest": "jest",
+    "test": "jest",
     "lint:js": "eslint .",
     "lint:spelling": "cspell --dot --gitignore --no-progress '**'",
     "watch": "grunt watch",
@@ -114,8 +110,7 @@
     "build:react": "grunt react",
     "build:vue": "grunt vue",
     "build:angular": "grunt angular",
-    "vue:demo": "vite --config vue/demo/validation/vite.config.js",
-    "server": "grunt jasmine:interactive"
+  "vue:demo": "vite --config vue/demo/validation/vite.config.js"
   },
   "style": "build/css/intlTelInput.css",
   "main": "./build/js/intlTelInput.js",

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.7.0/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.1/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

@@ -1628,6 +1628,7 @@ var interfaceTranslations = {
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
@@ -1756,8 +1757,8 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-var createEl = (name, attrs, container) => {
-  const el = document.createElement(name);
+var createEl = (tagName, attrs, container) => {
+  const el = document.createElement(tagName);
   if (attrs) {
     Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
   }
@@ -1770,7 +1771,14 @@ var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
   Object.values(instances).forEach((instance) => instance[method](...args));
 };
-var Iti = class {
+var Iti = class _Iti {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(flags) {
+    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
+  }
   constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
@@ -1955,20 +1963,14 @@ var Iti = class {
       countrySearch,
       i18n
     } = this.options;
-    let parentClass = "iti";
-    if (allowDropdown) {
-      parentClass += " iti--allow-dropdown";
-    }
-    if (showFlags) {
-      parentClass += " iti--show-flags";
-    }
-    if (containerClass) {
-      parentClass += ` ${containerClass}`;
-    }
-    if (!useFullscreenPopup) {
-      parentClass += " iti--inline-dropdown";
-    }
-    const wrapper = createEl("div", { class: parentClass });
+    const parentClasses = _Iti._buildClassNames({
+      "iti": true,
+      "iti--allow-dropdown": allowDropdown,
+      "iti--show-flags": showFlags,
+      "iti--inline-dropdown": !useFullscreenPopup,
+      [containerClass]: Boolean(containerClass)
+    });
+    const wrapper = createEl("div", { class: parentClasses });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
@@ -1989,9 +1991,8 @@ var Iti = class {
             class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
-            "aria-haspopup": "true",
-            "aria-controls": `iti-${this.id}__dropdown-content`,
-            "role": "combobox"
+            "aria-haspopup": "dialog",
+            "aria-controls": `iti-${this.id}__dropdown-content`
           },
           this.countryContainer
         );
@@ -2030,15 +2031,38 @@ var Iti = class {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
         this.dropdownContent = createEl("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
+          class: `iti__dropdown-content iti__hide ${extraClasses}`,
+          role: "dialog",
+          "aria-modal": "true"
         });
         if (countrySearch) {
+          const searchWrapper = createEl(
+            "div",
+            { class: "iti__search-input-wrapper" },
+            this.dropdownContent
+          );
+          this.searchIcon = createEl(
+            "span",
+            {
+              class: "iti__search-icon",
+              "aria-hidden": "true"
+            },
+            searchWrapper
+          );
+          this.searchIcon.innerHTML = `
+            <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>`;
           this.searchInput = createEl(
             "input",
             {
-              type: "text",
+              id: `iti-${this.id}__search-input`,
+              // Chrome says inputs need either a name or an id
+              type: "search",
               class: "iti__search-input",
               placeholder: i18n.searchPlaceholder,
+              // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
               role: "combobox",
               "aria-expanded": "true",
               "aria-label": i18n.searchPlaceholder,
@@ -2046,13 +2070,42 @@ var Iti = class {
               "aria-autocomplete": "list",
               "autocomplete": "off"
             },
-            this.dropdownContent
+            searchWrapper
+          );
+          this.searchClearButton = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__search-clear iti__hide",
+              "aria-label": i18n.clearSearchAriaLabel,
+              tabindex: "-1"
+            },
+            searchWrapper
           );
+          const maskId = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${maskId}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
+              </mask>
+              <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
+            </svg>`;
           this.searchResultsA11yText = createEl(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
           );
+          this.searchNoResults = createEl(
+            "div",
+            {
+              class: "iti__no-results iti__hide",
+              "aria-hidden": "true"
+              // all a11y messaging happens in this.searchResultsA11yText
+            },
+            this.dropdownContent
+          );
+          this.searchNoResults.textContent = i18n.zeroSearchResults;
         }
         this.countryList = createEl(
           "ul",
@@ -2066,18 +2119,16 @@ var Iti = class {
         );
         this._appendListItems();
         if (countrySearch) {
-          this._updateSearchResultsText();
+          this._updateSearchResultsA11yText();
         }
         if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (containerClass) {
-            dropdownClasses += ` ${containerClass}`;
-          }
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
-          } else {
-            dropdownClasses += " iti--inline-dropdown";
-          }
+          const dropdownClasses = _Iti._buildClassNames({
+            "iti": true,
+            "iti--container": true,
+            "iti--fullscreen-popup": useFullscreenPopup,
+            "iti--inline-dropdown": !useFullscreenPopup,
+            [containerClass]: Boolean(containerClass)
+          });
           this.dropdown = createEl("div", { class: dropdownClasses });
           this.dropdown.appendChild(this.dropdownContent);
         } else {
@@ -2475,6 +2526,11 @@ var Iti = class {
         } else {
           this._filterCountries("", true);
         }
+        if (this.searchInput.value) {
+          this.searchClearButton.classList.remove("iti__hide");
+        } else {
+          this.searchClearButton.classList.add("iti__hide");
+        }
       };
       let keyupTimer = null;
       this._handleSearchChange = () => {
@@ -2487,6 +2543,13 @@ var Iti = class {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
+      this._handleSearchClear = (e) => {
+        e.stopPropagation();
+        this.searchInput.value = "";
+        this.searchInput.focus();
+        doFilter();
+      };
+      this.searchClearButton.addEventListener("click", this._handleSearchClear);
       this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
@@ -2551,12 +2614,17 @@ var Iti = class {
     }
     if (noCountriesAddedYet) {
       this._highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove("iti__hide");
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add("iti__hide");
     }
     this.countryList.scrollTop = 0;
-    this._updateSearchResultsText();
+    this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n } = this.options;
     const count = this.countryList.childElementCount;
     let searchText;
@@ -2671,9 +2739,8 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.classList.add("iti__highlight");
       this.highlightedItem.setAttribute("aria-selected", "true");
-      const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
       if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
       }
     }
@@ -2837,7 +2904,6 @@ var Iti = class {
   _closeDropdown() {
     this.dropdownContent.classList.add("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "false");
-    this.selectedCountry.removeAttribute("aria-activedescendant");
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
@@ -2845,9 +2911,9 @@ var Iti = class {
       this.searchInput.removeAttribute("aria-activedescendant");
     }
     this.dropdownArrow.classList.remove("iti__arrow--up");
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
     if (this.options.countrySearch) {
       this.searchInput.removeEventListener("input", this._handleSearchChange);
+      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
     }
     document.documentElement.removeEventListener(
       "click",
@@ -3205,7 +3271,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.7.0"
+    version: "25.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -264,6 +264,7 @@ declare module "intl-tel-input/i18n/types" {
         ax?: string;
         selectedCountryAriaLabel?: string;
         searchPlaceholder?: string;
+        clearSearchAriaLabel?: string;
         countryListAriaLabel?: string;
         oneSearchResult?: string;
         multipleSearchResults?: string;
@@ -397,6 +398,9 @@ declare module "intl-tel-input" {
         private dropdownArrow;
         private dropdownContent;
         private searchInput;
+        private searchIcon;
+        private searchClearButton;
+        private searchNoResults;
         private searchResultsA11yText;
         private countryList;
         private dropdown;
@@ -418,11 +422,17 @@ declare module "intl-tel-input" {
         private _handleClickOffToClose;
         private _handleKeydownOnDropdown;
         private _handleSearchChange;
+        private _handleSearchClear;
         private _handlePageLoad;
         private resolveAutoCountryPromise;
         private rejectAutoCountryPromise;
         private resolveUtilsScriptPromise;
         private rejectUtilsScriptPromise;
+        /**
+         * Build a space-delimited class string from an object map of className -> truthy/falsey.
+         * Only keys with truthy values are included.
+         */
+        private static _buildClassNames;
         constructor(input: HTMLInputElement, customOptions?: SomeOptions);
         _init(): void;
         private _processCountryData;
@@ -449,7 +459,7 @@ declare module "intl-tel-input" {
         private _bindDropdownListeners;
         private _searchForCountry;
         private _filterCountries;
-        private _updateSearchResultsText;
+        private _updateSearchResultsA11yText;
         private _handleUpDownKey;
         private _handleEnterKey;
         private _updateValFromNumber;

package/react/build/IntlTelInput.js

@@ -1592,6 +1592,7 @@ var interfaceTranslations = {
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
@@ -1720,8 +1721,8 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-var createEl = (name, attrs, container) => {
-  const el = document.createElement(name);
+var createEl = (tagName, attrs, container) => {
+  const el = document.createElement(tagName);
   if (attrs) {
     Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
   }
@@ -1734,7 +1735,14 @@ var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
   Object.values(instances).forEach((instance) => instance[method](...args));
 };
-var Iti = class {
+var Iti = class _Iti {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(flags) {
+    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
+  }
   constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
@@ -1919,20 +1927,14 @@ var Iti = class {
       countrySearch,
       i18n
     } = this.options;
-    let parentClass = "iti";
-    if (allowDropdown) {
-      parentClass += " iti--allow-dropdown";
-    }
-    if (showFlags) {
-      parentClass += " iti--show-flags";
-    }
-    if (containerClass) {
-      parentClass += ` ${containerClass}`;
-    }
-    if (!useFullscreenPopup) {
-      parentClass += " iti--inline-dropdown";
-    }
-    const wrapper = createEl("div", { class: parentClass });
+    const parentClasses = _Iti._buildClassNames({
+      "iti": true,
+      "iti--allow-dropdown": allowDropdown,
+      "iti--show-flags": showFlags,
+      "iti--inline-dropdown": !useFullscreenPopup,
+      [containerClass]: Boolean(containerClass)
+    });
+    const wrapper = createEl("div", { class: parentClasses });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
@@ -1953,9 +1955,8 @@ var Iti = class {
             class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
-            "aria-haspopup": "true",
-            "aria-controls": `iti-${this.id}__dropdown-content`,
-            "role": "combobox"
+            "aria-haspopup": "dialog",
+            "aria-controls": `iti-${this.id}__dropdown-content`
           },
           this.countryContainer
         );
@@ -1994,15 +1995,38 @@ var Iti = class {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
         this.dropdownContent = createEl("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
+          class: `iti__dropdown-content iti__hide ${extraClasses}`,
+          role: "dialog",
+          "aria-modal": "true"
         });
         if (countrySearch) {
+          const searchWrapper = createEl(
+            "div",
+            { class: "iti__search-input-wrapper" },
+            this.dropdownContent
+          );
+          this.searchIcon = createEl(
+            "span",
+            {
+              class: "iti__search-icon",
+              "aria-hidden": "true"
+            },
+            searchWrapper
+          );
+          this.searchIcon.innerHTML = `
+            <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>`;
           this.searchInput = createEl(
             "input",
             {
-              type: "text",
+              id: `iti-${this.id}__search-input`,
+              // Chrome says inputs need either a name or an id
+              type: "search",
               class: "iti__search-input",
               placeholder: i18n.searchPlaceholder,
+              // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
               role: "combobox",
               "aria-expanded": "true",
               "aria-label": i18n.searchPlaceholder,
@@ -2010,13 +2034,42 @@ var Iti = class {
               "aria-autocomplete": "list",
               "autocomplete": "off"
             },
-            this.dropdownContent
+            searchWrapper
+          );
+          this.searchClearButton = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__search-clear iti__hide",
+              "aria-label": i18n.clearSearchAriaLabel,
+              tabindex: "-1"
+            },
+            searchWrapper
           );
+          const maskId = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${maskId}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
+              </mask>
+              <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
+            </svg>`;
           this.searchResultsA11yText = createEl(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
           );
+          this.searchNoResults = createEl(
+            "div",
+            {
+              class: "iti__no-results iti__hide",
+              "aria-hidden": "true"
+              // all a11y messaging happens in this.searchResultsA11yText
+            },
+            this.dropdownContent
+          );
+          this.searchNoResults.textContent = i18n.zeroSearchResults;
         }
         this.countryList = createEl(
           "ul",
@@ -2030,18 +2083,16 @@ var Iti = class {
         );
         this._appendListItems();
         if (countrySearch) {
-          this._updateSearchResultsText();
+          this._updateSearchResultsA11yText();
         }
         if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (containerClass) {
-            dropdownClasses += ` ${containerClass}`;
-          }
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
-          } else {
-            dropdownClasses += " iti--inline-dropdown";
-          }
+          const dropdownClasses = _Iti._buildClassNames({
+            "iti": true,
+            "iti--container": true,
+            "iti--fullscreen-popup": useFullscreenPopup,
+            "iti--inline-dropdown": !useFullscreenPopup,
+            [containerClass]: Boolean(containerClass)
+          });
           this.dropdown = createEl("div", { class: dropdownClasses });
           this.dropdown.appendChild(this.dropdownContent);
         } else {
@@ -2439,6 +2490,11 @@ var Iti = class {
         } else {
           this._filterCountries("", true);
         }
+        if (this.searchInput.value) {
+          this.searchClearButton.classList.remove("iti__hide");
+        } else {
+          this.searchClearButton.classList.add("iti__hide");
+        }
       };
       let keyupTimer = null;
       this._handleSearchChange = () => {
@@ -2451,6 +2507,13 @@ var Iti = class {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
+      this._handleSearchClear = (e) => {
+        e.stopPropagation();
+        this.searchInput.value = "";
+        this.searchInput.focus();
+        doFilter();
+      };
+      this.searchClearButton.addEventListener("click", this._handleSearchClear);
       this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
@@ -2515,12 +2578,17 @@ var Iti = class {
     }
     if (noCountriesAddedYet) {
       this._highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove("iti__hide");
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add("iti__hide");
     }
     this.countryList.scrollTop = 0;
-    this._updateSearchResultsText();
+    this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n } = this.options;
     const count = this.countryList.childElementCount;
     let searchText;
@@ -2635,9 +2703,8 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.classList.add("iti__highlight");
       this.highlightedItem.setAttribute("aria-selected", "true");
-      const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
       if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
       }
     }
@@ -2801,7 +2868,6 @@ var Iti = class {
   _closeDropdown() {
     this.dropdownContent.classList.add("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "false");
-    this.selectedCountry.removeAttribute("aria-activedescendant");
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
@@ -2809,9 +2875,9 @@ var Iti = class {
       this.searchInput.removeAttribute("aria-activedescendant");
     }
     this.dropdownArrow.classList.remove("iti__arrow--up");
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
     if (this.options.countrySearch) {
       this.searchInput.removeEventListener("input", this._handleSearchChange);
+      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
     }
     document.documentElement.removeEventListener(
       "click",
@@ -3169,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.7.0"
+    version: "25.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;