intl-tel-input 28.0.6 → 28.0.8

package/dist/js/intlTelInputWithUtils.mjs

@@ -2467,6 +2467,7 @@ var UI = class _UI {
   #highlightedListItemEl = null;
   #listItemByIso2 = /* @__PURE__ */ new Map();
   #dropdownAbortController = null;
+  #resizeObserver;
   // public
   telInputEl;
   hadInitialPlaceholder;
@@ -2508,6 +2509,7 @@ var UI = class _UI {
     this.#buildCountryContainer(wrapper);
     wrapper.appendChild(this.telInputEl);
     this.#updateInputPaddingAndReveal();
+    this.#observeSelectedCountryResize();
     this.#buildHiddenInputs(wrapper);
     this.ensureDropdownWidthSet();
   }
@@ -2515,6 +2517,7 @@ var UI = class _UI {
     const { allowDropdown, showFlags, containerClass, useFullscreenPopup } = this.#options;
     const parentClasses = buildClassNames({
       iti: true,
+      "iti--input-container": true,
       "iti--allow-dropdown": allowDropdown,
       "iti--show-flags": showFlags,
       "iti--inline-dropdown": !useFullscreenPopup,
@@ -2800,6 +2803,18 @@ var UI = class _UI {
       this.telInputEl.style.paddingLeft = `${inputPadding}px`;
     }
   }
+  //* Keep the input padding in sync when the selected country's rendered width changes — e.g. responsive font-size shifts that change the dial code text width. Skip while hidden (offsetWidth === 0) so we don't waste work or clobber the padding using a fallback constant.
+  #observeSelectedCountryResize() {
+    if (!this.#selectedCountryEl || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.#resizeObserver = new ResizeObserver(() => {
+      if (this.#selectedCountryEl?.offsetWidth) {
+        this.#updateInputPadding();
+      }
+    });
+    this.#resizeObserver.observe(this.#selectedCountryEl);
+  }
   static #getBody() {
     let body;
     try {
@@ -3375,6 +3390,7 @@ var UI = class _UI {
   destroy() {
     this.telInputEl.iti = void 0;
     delete this.telInputEl.dataset[DATA_KEYS.INSTANCE_ID];
+    this.#resizeObserver?.disconnect();
     this.telInputEl.style.paddingLeft = this.#originalPaddingLeft;
     const wrapper = this.telInputEl.parentNode;
     if (wrapper) {
@@ -4092,8 +4108,12 @@ var Iti = class _Iti {
     });
     this.#ui.telInputEl.dispatchEvent(e);
   }
-  //* Open the dropdown.
+  //* Open the dropdown. Bail if already open — otherwise the existing AbortController gets overwritten
+  //* and its listeners leak. Reachable via openDropdownWithPlus when dropdownAlwaysOpen is set
   #openDropdown() {
+    if (this.#ui.isDropdownOpen()) {
+      return;
+    }
     this.#ui.openDropdown(
       (li) => this.#selectListItem(li),
       () => this.#closeDropdown()
@@ -4698,7 +4718,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "28.0.6",
+    version: "28.0.8",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "28.0.6",
+  "version": "28.0.8",
   "description": "A JavaScript library for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",