intl-tel-input 29.1.0 → 29.1.2

package/dist/js/intlTelInput.mjs

@@ -2455,7 +2455,7 @@ var Numerals = class _Numerals {
 
 // packages/core/src/js/core/ui.ts
 var supportsCssAnchor = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --x");
-var UI = class _UI {
+var UI = class {
   // private
   #options;
   #id;
@@ -2465,6 +2465,7 @@ var UI = class _UI {
   #searchTokens;
   #searchDebounceTimer = null;
   #inlineDropdownHeight;
+  #cssAnchorPositioningDone = false;
   #countryContainerEl;
   #selectedCountryEl;
   #selectedFlagEl;
@@ -2657,16 +2658,6 @@ var UI = class _UI {
     if (countrySearch) {
       this.#updateSearchResultsA11yText();
     }
-    if (!isFullscreen) {
-      const { height, width } = this.#getHiddenInlineDropdownSize();
-      this.#inlineDropdownHeight = height;
-      if (countrySearch) {
-        this.#countrySelectorEl.style.height = `${height}px`;
-        if (!matchDropdownWidth && width > 0) {
-          this.#countrySelectorEl.style.width = `${width}px`;
-        }
-      }
-    }
     if (detachedParent) {
       const wrapperClasses = buildClassNames({
         iti: true,
@@ -2677,9 +2668,6 @@ var UI = class _UI {
       });
       this.#detachedCountrySelectorEl = createEl("div", { class: wrapperClasses });
       this.#detachedCountrySelectorEl.appendChild(this.#countrySelectorEl);
-      if (!isFullscreen) {
-        this.#setupCssAnchorPositioning();
-      }
     } else {
       this.#countryContainerEl.appendChild(this.#countrySelectorEl);
     }
@@ -2852,24 +2840,16 @@ var UI = class _UI {
     });
     this.#resizeObserver.observe(this.#selectedCountryEl);
   }
-  static #getBody() {
-    let body;
-    try {
-      body = window.top.document.body;
-    } catch (e) {
-      body = document.body;
-    }
-    return body;
-  }
   //* When input is in a hidden container during init, we cannot calculate the selected country width.
   //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
   //* To get the right styling to apply, all we need is a shallow clone of the container,
   //* and then to inject a deep clone of the selectedCountryEl element.
+  //* Measures in the LOCAL document.body: appending to the local body escapes any hidden ancestor container, and the input's own frame is where intl-tel-input's styles live (so the clone lays out correctly). We deliberately do NOT escape to window.top: that only measures correctly in the rare case where the top frame also loads the library's styles, and measures wrong when it doesn't (e.g. a same-origin iframe whose outer frame lacks the styles — cf. #2178). If the local frame itself isn't laid out yet (e.g. an iframe hidden during init), this returns 0 and the caller falls back to a sane constant; the ResizeObserver in #observeSelectedCountryResize then corrects the padding once the input becomes visible.
   #getHiddenSelectedCountryWidth() {
     if (!this.telInputEl.parentNode) {
       return 0;
     }
-    const body = _UI.#getBody();
+    const body = document.body;
     const containerClone = this.telInputEl.parentNode.cloneNode(
       false
     );
@@ -2885,21 +2865,43 @@ var UI = class _UI {
     body.removeChild(containerClone);
     return width;
   }
-  // Get the dropdown size (before it is added to the DOM)
+  //* Measure the inline dropdown size once, lazily, on first open — see #getHiddenInlineDropdownSize for why measuring forces a reflow. Memoised via #inlineDropdownHeight so subsequent opens are free.
+  //* Captured for two uses: (1) on open, decide whether to position the dropdown above or below the input; (2) when countrySearch is enabled, pin the dropdown height (and, when matchDropdownWidth is disabled, width) so it doesn't jump around as the country list is filtered.
+  #ensureInlineDropdownSizeMeasured() {
+    if (this.#inlineDropdownHeight !== void 0) {
+      return;
+    }
+    const { countrySearch, matchDropdownWidth } = this.#options;
+    const { height, width } = this.#getHiddenInlineDropdownSize();
+    this.#inlineDropdownHeight = height;
+    if (countrySearch) {
+      this.#countrySelectorEl.style.height = `${height}px`;
+      if (!matchDropdownWidth && width > 0) {
+        this.#countrySelectorEl.style.width = `${width}px`;
+      }
+    }
+  }
+  // Measure the dropdown by moving it into a temporary hidden container on the body (it needs the right ancestor classes to lay out correctly). Restores it to its original position afterwards — a no-op during init (when it is still detached) but required when called lazily on first open (when it is already inserted).
+  //* Deliberately measures in the LOCAL document.body (not window.top): this runs on first open, when the input's own frame is visibly rendered and styled. Escaping to the top frame breaks when the input is inside a same-origin iframe whose outer frame lacks intl-tel-input's styles (e.g. Storybook), as the dropdown would then be measured unstyled and come out far too tall (issue #2178).
   #getHiddenInlineDropdownSize() {
-    const body = _UI.#getBody();
-    this.#countrySelectorEl.classList.remove(CLASSES.HIDE);
+    const body = document.body;
+    const selectorEl = this.#countrySelectorEl;
+    const originalParent = selectorEl.parentNode;
+    const originalNextSibling = selectorEl.nextSibling;
+    selectorEl.classList.remove(CLASSES.HIDE);
     const tempContainer = createEl("div", {
       class: "iti iti--inline-country-selector"
     });
-    tempContainer.appendChild(this.#countrySelectorEl);
+    tempContainer.appendChild(selectorEl);
     tempContainer.style.visibility = "hidden";
     body.appendChild(tempContainer);
-    const height = this.#countrySelectorEl.offsetHeight;
-    const width = this.#countrySelectorEl.offsetWidth;
+    const height = selectorEl.offsetHeight;
+    const width = selectorEl.offsetWidth;
     body.removeChild(tempContainer);
-    tempContainer.style.visibility = "";
-    this.#countrySelectorEl.classList.add(CLASSES.HIDE);
+    selectorEl.classList.add(CLASSES.HIDE);
+    if (originalParent) {
+      originalParent.insertBefore(selectorEl, originalNextSibling);
+    }
     return {
       height: height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT,
       width
@@ -3063,6 +3065,9 @@ var UI = class _UI {
   openCountrySelector(onSelect, onClose) {
     const { countrySearch, dropdownAlwaysOpen } = this.#options;
     this.#countrySelectorAbortController = new AbortController();
+    if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
+      this.#ensureInlineDropdownSizeMeasured();
+    }
     this.ensureDropdownWidthSet();
     if (this.#detachedCountrySelectorEl) {
       this.#injectAndPositionDetachedCountrySelector();
@@ -3335,7 +3340,10 @@ var UI = class _UI {
         this.#detachedCountrySelectorEl.style.paddingLeft = `${inputPos.left}px`;
         this.#detachedCountrySelectorEl.style.paddingRight = `${window.innerWidth - inputPos.right}px`;
       }
-    } else if (!supportsCssAnchor) {
+    } else {
+      this.#setupCssAnchorPositioning();
+    }
+    if (!isFullscreen && !supportsCssAnchor) {
       const inputPos = this.telInputEl.getBoundingClientRect();
       this.#detachedCountrySelectorEl.style.left = `${inputPos.left}px`;
       if (this.#shouldPositionDropdownBelowInput()) {
@@ -3348,13 +3356,17 @@ var UI = class _UI {
     detachedParent.appendChild(this.#detachedCountrySelectorEl);
   }
   //* Wire up CSS Anchor Positioning between the input and the detached country selector using a
-  //* unique anchor name per instance. Called once at build time — the matching styles in
+  //* unique anchor name per instance. Called lazily on first open (memoised) — the matching styles in
   //* intlTelInput.css only take effect in browsers that support anchor(); elsewhere these
   //* properties are inert. We append our name to any existing anchor-name (read via
   //* getComputedStyle so we pick up CSS-defined values), so consumer-set anchors on the input
   //* are preserved. Caveat: this snapshots the consumer's value once — if they later change
   //* anchor-name via CSS (e.g. a class swap), our inline write will shadow the change.
   #setupCssAnchorPositioning() {
+    if (this.#cssAnchorPositioningDone) {
+      return;
+    }
+    this.#cssAnchorPositioningDone = true;
     const anchorName = `--iti-anchor-${this.#id}`;
     const existing = getComputedStyle(this.telInputEl).anchorName;
     this.telInputEl.style.anchorName = existing && existing !== "none" ? `${existing}, ${anchorName}` : anchorName;
@@ -4829,7 +4841,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.1.0",
+    version: "29.1.2",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,