intl-tel-input 29.3.0 → 29.4.0

package/dist/js/intlTelInputWithUtils.mjs

@@ -1977,7 +1977,7 @@ var defaults = {
   customPlaceholder: null,
   //* Always show the dropdown
   dropdownAlwaysOpen: false,
-  //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup.
+  //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup (see fullscreenParent).
   dropdownParent: null,
   //* Don't display these countries.
   excludeCountries: null,
@@ -1985,6 +1985,8 @@ var defaults = {
   matchDropdownWidth: true,
   //* Format the number as the user types
   formatAsYouType: true,
+  //* Optional DOM element to append the fullscreen popup to, instead of document.body (e.g. a modal <dialog>, where a body-mounted popup would be unreachable). Only consulted in fullscreen rendering (see dropdownParent for the dropdown). Null means document.body, which is resolved on open rather than here, as document may not exist yet (e.g. SSR).
+  fullscreenParent: null,
   //* Inject hidden inputs with the names returned from this function, and on submit, populate them with the full number and selected country iso2.
   hiddenInputs: null,
   //* Translations for the core library UI strings e.g. search input placeholder, country names.
@@ -2168,8 +2170,9 @@ var validateOptions = (customOptions) => {
         validatedOptions[key] = value;
         break;
       case "dropdownParent":
+      case "fullscreenParent":
         if (value !== null && !isElLike(value)) {
-          warnOption("dropdownParent", "an HTMLElement or null", value);
+          warnOption(key, "an HTMLElement or null", value);
           break;
         }
         validatedOptions[key] = value;
@@ -2733,6 +2736,9 @@ var UI = class {
       },
       this.#countrySelectorEl
     );
+    if (!countrySearch) {
+      this.#countryListEl.setAttribute("tabindex", "0");
+    }
     this.#appendListItems();
     if (countrySearch) {
       this.#updateSearchResultsA11yText();
@@ -2753,11 +2759,12 @@ var UI = class {
       this.#countryContainerEl.appendChild(this.#countrySelectorEl);
     }
   }
-  //* Resolve the DOM element to attach the country selector to. Fullscreen always uses document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+  //* Resolve the DOM element to attach the country selector to. Fullscreen is always detached: it uses the consumer-supplied fullscreenParent, falling back to document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+  //* NOTE: these are deliberately two separate options. For the dropdown, setting a parent switches it from inline to detached rendering (pos:fixed, positioned against the input), whereas the fullscreen popup is detached regardless, so its parent only relocates it. Sharing one option would force a detached dropdown on anyone who only needs to move the fullscreen popup e.g. into a modal <dialog> (issue #2199).
   #getDetachedParent() {
-    const { countrySelectorMode, dropdownParent } = this.#options;
+    const { countrySelectorMode, dropdownParent, fullscreenParent } = this.#options;
     if (countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN) {
-      return document.body;
+      return fullscreenParent ?? document.body;
     }
     if (countrySelectorMode === COUNTRY_SELECTOR_MODE.DROPDOWN) {
       return dropdownParent;
@@ -2883,7 +2890,6 @@ var UI = class {
       const listItem = createEl("li", {
         id: `iti-${this.#id}__item-${c.iso2}`,
         class: liClass,
-        tabindex: "-1",
         role: "option",
         [ARIA.SELECTED]: "false"
       });
@@ -3075,18 +3081,20 @@ var UI = class {
       container.scrollTop = offsetTop - containerRect.height + elementRect.height;
     }
   }
+  //* The element that holds focus while the country selector is open: the search input, or (when countrySearch is disabled) the country list itself.
+  #getOpenFocusEl() {
+    return this.#options.countrySearch ? this.#searchInputEl : this.#countryListEl;
+  }
   //* Remove highlighting from the previous list item and highlight the new one.
   #highlightListItem(listItem, doScroll = true) {
     this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
     if (listItem) {
       listItem.classList.add(CLASSES.HIGHLIGHT);
-      if (this.#options.countrySearch) {
-        const activeDescendant = listItem.getAttribute("id") || "";
-        this.#searchInputEl.setAttribute(
-          ARIA.ACTIVE_DESCENDANT,
-          activeDescendant
-        );
-      }
+      const activeDescendant = listItem.getAttribute("id") || "";
+      this.#getOpenFocusEl().setAttribute(
+        ARIA.ACTIVE_DESCENDANT,
+        activeDescendant
+      );
       if (doScroll) {
         this.#scrollCountryListToItem(listItem);
       }
@@ -3165,7 +3173,7 @@ var UI = class {
   //* Open the country selector: create a fresh AbortController, do the DOM work, and wire up all
   //* open-state listeners (which invoke the caller's onSelect / onClose callbacks).
   openCountrySelector(onSelect, onClose) {
-    const { countrySearch, dropdownAlwaysOpen } = this.#options;
+    const { dropdownAlwaysOpen } = this.#options;
     this.#countrySelectorAbortController = new AbortController();
     if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
       this.#ensureInlineDropdownSizeMeasured();
@@ -3188,10 +3196,11 @@ var UI = class {
     if (itemToHighlight) {
       this.#highlightListItem(itemToHighlight);
     }
-    if (countrySearch && !dropdownAlwaysOpen) {
-      this.#searchInputEl.focus();
+    if (!dropdownAlwaysOpen) {
+      this.#getOpenFocusEl().focus();
     }
     if (this.#options.countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN && this.#detachedCountrySelectorEl && window.visualViewport) {
+      this.#adjustFullscreenPopupToViewport();
       window.visualViewport.addEventListener(
         "resize",
         () => {
@@ -3308,6 +3317,20 @@ var UI = class {
     };
     this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
     this.#countrySelectorEl?.addEventListener("keydown", handleKeydown, { signal });
+    if (this.#detachedCountrySelectorEl) {
+      this.#countrySelectorEl?.addEventListener(
+        "keydown",
+        (e) => {
+          if (e.key === KEYS.TAB) {
+            e.preventDefault();
+            onEscape();
+            const focusEl = e.shiftKey ? this.#selectedCountryEl : this.telInputEl;
+            focusEl.focus();
+          }
+        },
+        { signal }
+      );
+    }
   }
   //* Wire up country search input listener: typing filters the list, the clear button resets it.
   #bindSearchInputListener(signal) {
@@ -3405,8 +3428,8 @@ var UI = class {
     this.#countrySelectorAbortController = null;
     this.#countrySelectorEl.classList.add(CLASSES.HIDE);
     this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "false");
+    this.#getOpenFocusEl().removeAttribute(ARIA.ACTIVE_DESCENDANT);
     if (countrySearch) {
-      this.#searchInputEl.removeAttribute(ARIA.ACTIVE_DESCENDANT);
       this.#searchInputEl.value = "";
       this.#applySearchFilter();
       if (this.#highlightedListItemEl) {
@@ -3419,6 +3442,7 @@ var UI = class {
       this.#detachedCountrySelectorEl.remove();
       this.#detachedCountrySelectorEl.style.top = "";
       this.#detachedCountrySelectorEl.style.bottom = "";
+      this.#detachedCountrySelectorEl.style.height = "";
       this.#detachedCountrySelectorEl.style.paddingLeft = "";
       this.#detachedCountrySelectorEl.style.paddingRight = "";
     } else {
@@ -3484,8 +3508,7 @@ var UI = class {
     if (!vv || !this.#detachedCountrySelectorEl) {
       return;
     }
-    const virtualKeyboardHeight = window.innerHeight - vv.height;
-    this.#detachedCountrySelectorEl.style.bottom = `${virtualKeyboardHeight}px`;
+    this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
   }
   // UI: Whether the country selector is currently open (visible).
   isCountrySelectorOpen() {
@@ -4955,7 +4978,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.3.0",
+    version: "29.4.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,

package/package.json

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