intl-tel-input 27.1.2 → 27.2.0

package/react/dist/IntlTelInput.js

@@ -2975,7 +2975,7 @@ var UI = class _UI {
           this.#selectedCountryEl.focus();
         }
       }
-      if (!this.#options.countrySearch && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
+      if (!this.#options.countrySearch && e.target !== this.telInputEl && REGEX.HIDDEN_SEARCH_CHAR.test(e.key)) {
         e.stopPropagation();
         if (queryTimer) {
           clearTimeout(queryTimer);
@@ -3483,6 +3483,8 @@ var Iti = class _Iti {
   #isActive = true;
   #abortController;
   #numerals;
+  //* Tracks whether the user has typed/pasted their own formatting chars, so AYT-formatting should back off.
+  #userOverrideFormatting = false;
   #autoCountryDeferred;
   #utilsDeferred;
   constructor(input, customOptions = {}) {
@@ -3672,176 +3674,211 @@ var Iti = class _Iti {
     this.#bindKeydownListener();
     this.#bindPasteListener();
   }
-  #bindInputListener() {
-    const {
-      strictMode,
-      formatAsYouType,
-      separateDialCode,
-      allowDropdown,
-      countrySearch
-    } = this.#options;
-    let userOverrideFormatting = false;
-    if (REGEX.ALPHA_UNICODE.test(this.#getTelInputValue())) {
-      userOverrideFormatting = true;
+  //* Android workaround for handling plus when separateDialCode enabled (as impossible to handle with keydown/keyup, for which e.key always returns "Unidentified", see https://stackoverflow.com/q/59584061/217866)
+  #handleAndroidPlusKey(inputValue) {
+    this.#removeJustTypedChar(inputValue);
+    this.#openDropdownWithPlus();
+  }
+  //* Android strictMode workaround: the keydown-based filter can't block these because e.key is "Unidentified" on Android virtual keyboards, so strip them here on input.
+  #handleAndroidStrictReject(inputValue, rejectedInput) {
+    const newCaretPos = this.#removeJustTypedChar(inputValue);
+    this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+    this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+      source: "key",
+      rejectedInput,
+      reason: "invalid"
+    });
+  }
+  //* Format the input value using libphonenumber's AYT formatter, preserving caret position (called after an input event).
+  #formatAsYouType(inputValue, isDeleteForwards) {
+    const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
+    const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
+    const relevantCharsBeforeCaret = valueBeforeCaret.replace(
+      REGEX.NON_PLUS_NUMERIC_GLOBAL,
+      ""
+    ).length;
+    const fullNumber = this.#getFullNumber();
+    const formattedValue = formatNumberAsYouType(
+      fullNumber,
+      inputValue,
+      intlTelInput.utils,
+      this.#selectedCountry,
+      this.#options.separateDialCode
+    );
+    const newCaretPos = computeNewCaretPosition(
+      relevantCharsBeforeCaret,
+      formattedValue,
+      currentCaretPos,
+      isDeleteForwards
+    );
+    this.#setTelInputValue(formattedValue);
+    this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+  }
+  //* If separateDialCode AND typed dial code (e.g. from paste or autofill, or from typing a dial code when countrySearch disabled), then remove the typed dial code.
+  //* Only strip when a full dial code is actually present — otherwise a lone typed "+" (or partial prefix) would get erased.
+  #stripTypedDialCode(inputValue) {
+    if (inputValue.startsWith("+") && this.#selectedCountry && this.#getDialCode(inputValue)) {
+      const cleanNumber = stripSeparateDialCode(
+        inputValue,
+        true,
+        true,
+        this.#selectedCountry
+      );
+      this.#setTelInputValue(cleanNumber);
     }
-    const handleInputEvent = (e) => {
-      if (e?.detail && e.detail["isCountryChange"]) {
-        return;
-      }
-      const inputValue = this.#getTelInputValue();
-      if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
-        this.#removeJustTypedChar(inputValue);
-        this.#openDropdownWithPlus();
-        return;
-      }
-      if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
-        const newCaretPos = this.#removeJustTypedChar(inputValue);
-        this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "key",
-          rejectedInput: e.data,
-          reason: "invalid"
-        });
-        return;
-      }
-      if (this.#updateCountryFromNumber(inputValue)) {
-        this.#dispatchCountryChangeEvent();
-      }
-      const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
-      const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
-      if (isFormattingChar || isPaste && !strictMode) {
-        userOverrideFormatting = true;
-      } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
-        userOverrideFormatting = false;
-      }
-      const isSetNumber = e?.detail && e.detail["isSetNumber"];
-      const isAscii = this.#numerals.isAscii();
-      if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
-        const currentCaretPos = this.#ui.telInputEl.selectionStart || 0;
-        const valueBeforeCaret = inputValue.substring(0, currentCaretPos);
-        const relevantCharsBeforeCaret = valueBeforeCaret.replace(
-          REGEX.NON_PLUS_NUMERIC_GLOBAL,
-          ""
-        ).length;
-        const isDeleteForwards = e?.inputType === INPUT_TYPES.DELETE_FORWARD;
-        const fullNumber = this.#getFullNumber();
-        const formattedValue = formatNumberAsYouType(
-          fullNumber,
-          inputValue,
-          intlTelInput.utils,
-          this.#selectedCountry,
-          separateDialCode
-        );
-        const newCaretPos = computeNewCaretPosition(
-          relevantCharsBeforeCaret,
-          formattedValue,
-          currentCaretPos,
-          isDeleteForwards
-        );
-        this.#setTelInputValue(formattedValue);
-        this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
-      }
-      if (separateDialCode && inputValue.startsWith("+") && this.#selectedCountry?.dialCode) {
-        const cleanNumber = stripSeparateDialCode(
-          inputValue,
-          true,
-          separateDialCode,
-          this.#selectedCountry
-        );
-        this.#setTelInputValue(cleanNumber);
-      }
-    };
+  }
+  #bindInputListener() {
+    this.#userOverrideFormatting = REGEX.ALPHA_UNICODE.test(
+      this.#getTelInputValue()
+    );
     this.#ui.telInputEl.addEventListener(
       "input",
-      handleInputEvent,
+      this.#handleInputEvent,
       {
         signal: this.#abortController.signal
       }
     );
   }
+  //* On input event: (1) Update selected country, (2) Format-as-you-type.
+  //* Note that this fires AFTER the input is updated.
+  #handleInputEvent = (e) => {
+    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const detail = e?.detail;
+    if (detail?.["isCountryChange"]) {
+      return;
+    }
+    const inputValue = this.#getTelInputValue();
+    if (this.#isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
+      this.#handleAndroidPlusKey(inputValue);
+      return;
+    }
+    if (this.#isAndroid && strictMode && (e?.data === " " || e?.data === "-" || e?.data === ".")) {
+      this.#handleAndroidStrictReject(inputValue, e.data);
+      return;
+    }
+    if (this.#updateCountryFromNumber(inputValue)) {
+      this.#dispatchCountryChangeEvent();
+    }
+    const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
+    const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
+    if (isFormattingChar || isPaste && !strictMode) {
+      this.#userOverrideFormatting = true;
+    } else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
+      this.#userOverrideFormatting = false;
+    }
+    if (formatAsYouType && !this.#userOverrideFormatting && !detail?.["isSetNumber"] && this.#numerals.isAscii()) {
+      this.#formatAsYouType(
+        inputValue,
+        e?.inputType === INPUT_TYPES.DELETE_FORWARD
+      );
+    }
+    if (separateDialCode) {
+      this.#stripTypedDialCode(inputValue);
+    }
+  };
   #bindKeydownListener() {
-    const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const { strictMode, separateDialCode } = this.#options;
     if (!strictMode && !separateDialCode) {
       return;
     }
-    const handleKeydownEvent = (e) => {
-      if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
-        return;
-      }
-      if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
-        e.preventDefault();
-        this.#openDropdownWithPlus();
-        return;
-      }
-      if (!strictMode) {
-        return;
-      }
-      const inputValue = this.#getTelInputValue();
-      const alreadyHasPlus = inputValue.startsWith("+");
-      const isInitialPlus = !alreadyHasPlus && this.#ui.telInputEl.selectionStart === 0 && e.key === "+";
-      const normalisedKey = this.#numerals.normalise(e.key);
-      const isNumeric = /^[0-9]$/.test(normalisedKey);
-      const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-      const input = this.#ui.telInputEl;
-      const selStart = input.selectionStart;
-      const selEnd = input.selectionEnd;
-      const before = inputValue.slice(0, selStart ?? void 0);
-      const after = inputValue.slice(selEnd ?? void 0);
-      const newValue = before + normalisedKey + after;
-      const newFullNumber = this.#buildFullNumber(newValue);
-      let hasExceededMaxLength = false;
-      if (intlTelInput.utils && this.#maxCoreNumberLength) {
-        const coreNumber = intlTelInput.utils.getCoreNumber(
-          newFullNumber,
-          this.#selectedCountry?.iso2
-        );
-        hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
-      }
-      const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
-      const isChangingDialCode = newCountry !== null;
-      if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "key",
-          rejectedInput: e.key,
-          reason: !isAllowedChar ? "invalid" : "max-length"
-        });
-        e.preventDefault();
-      }
-    };
-    this.#ui.telInputEl.addEventListener("keydown", handleKeydownEvent, {
+    this.#ui.telInputEl.addEventListener("keydown", this.#handleKeydownEvent, {
       signal: this.#abortController.signal
     });
   }
+  //* On keydown event: (1) if strictMode then prevent invalid characters, (2) if separateDialCode then handle plus key
+  //* Note that this fires BEFORE the input is updated.
+  #handleKeydownEvent = (e) => {
+    const { strictMode, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    if (!e.key || e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) {
+      return;
+    }
+    if (separateDialCode && allowDropdown && countrySearch && e.key === "+") {
+      e.preventDefault();
+      this.#openDropdownWithPlus();
+      return;
+    }
+    if (!strictMode) {
+      return;
+    }
+    const inputValue = this.#getTelInputValue();
+    const alreadyHasPlus = inputValue.startsWith("+");
+    const isInitialPlus = !alreadyHasPlus && this.#ui.telInputEl.selectionStart === 0 && e.key === "+";
+    const normalisedKey = this.#numerals.normalise(e.key);
+    const isNumeric = /^[0-9]$/.test(normalisedKey);
+    const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
+    const input = this.#ui.telInputEl;
+    const selStart = input.selectionStart;
+    const selEnd = input.selectionEnd;
+    const before = inputValue.slice(0, selStart ?? void 0);
+    const after = inputValue.slice(selEnd ?? void 0);
+    const newValue = before + normalisedKey + after;
+    const newFullNumber = this.#buildFullNumber(newValue);
+    let hasExceededMaxLength = false;
+    if (intlTelInput.utils && this.#maxCoreNumberLength) {
+      const coreNumber = intlTelInput.utils.getCoreNumber(
+        newFullNumber,
+        this.#selectedCountry?.iso2
+      );
+      hasExceededMaxLength = coreNumber.length > this.#maxCoreNumberLength;
+    }
+    const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
+    const isChangingDialCode = newCountry !== null;
+    if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+      this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+        source: "key",
+        rejectedInput: e.key,
+        reason: !isAllowedChar ? "invalid" : "max-length"
+      });
+      e.preventDefault();
+    }
+  };
   #bindPasteListener() {
     if (!this.#options.strictMode) {
       return;
     }
-    const handlePasteEvent = (e) => {
-      e.preventDefault();
-      const input = this.#ui.telInputEl;
-      const selStart = input.selectionStart;
-      const selEnd = input.selectionEnd;
-      const inputValue = this.#getTelInputValue();
-      const before = inputValue.slice(0, selStart ?? void 0);
-      const after = inputValue.slice(selEnd ?? void 0);
-      const iso2 = this.#selectedCountry?.iso2;
-      const pastedRaw = e.clipboardData.getData("text");
-      const pasted = this.#numerals.normalise(pastedRaw);
-      const initialCharSelected = selStart === 0 && selEnd > 0;
-      const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
-      const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
-      const hasLeadingPlus = allowedChars.startsWith("+");
-      const numerics = allowedChars.replace(/\+/g, "");
-      const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
-      let newValue = before + sanitised + after;
-      let rejectReason = sanitised !== pasted ? "invalid" : null;
-      if (newValue.length > 5 && intlTelInput.utils) {
-        let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
-        while (coreNumber.length === 0 && newValue.length > 0) {
-          newValue = newValue.slice(0, -1);
-          coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
-        }
-        if (!coreNumber) {
+    this.#ui.telInputEl.addEventListener("paste", this.#handlePasteEvent, {
+      signal: this.#abortController.signal
+    });
+  }
+  #handlePasteEvent = (e) => {
+    e.preventDefault();
+    const input = this.#ui.telInputEl;
+    const selStart = input.selectionStart;
+    const selEnd = input.selectionEnd;
+    const inputValue = this.#getTelInputValue();
+    const before = inputValue.slice(0, selStart ?? void 0);
+    const after = inputValue.slice(selEnd ?? void 0);
+    const iso2 = this.#selectedCountry?.iso2;
+    const pastedRaw = e.clipboardData.getData("text");
+    const pasted = this.#numerals.normalise(pastedRaw);
+    const initialCharSelected = selStart === 0 && selEnd > 0;
+    const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
+    const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
+    const hasLeadingPlus = allowedChars.startsWith("+");
+    const numerics = allowedChars.replace(/\+/g, "");
+    const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
+    let newValue = before + sanitised + after;
+    let rejectReason = sanitised !== pasted ? "invalid" : null;
+    if (newValue.length > 5 && intlTelInput.utils) {
+      let coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
+      while (coreNumber.length === 0 && newValue.length > 0) {
+        newValue = newValue.slice(0, -1);
+        coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
+      }
+      if (!coreNumber) {
+        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+          source: "paste",
+          rejectedInput: pastedRaw,
+          reason: "max-length"
+        });
+        return;
+      }
+      if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
+        if (input.selectionEnd === inputValue.length) {
+          const trimLength = coreNumber.length - this.#maxCoreNumberLength;
+          newValue = newValue.slice(0, newValue.length - trimLength);
+          rejectReason = "max-length";
+        } else {
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
@@ -3849,37 +3886,20 @@ var Iti = class _Iti {
           });
           return;
         }
-        if (this.#maxCoreNumberLength && coreNumber.length > this.#maxCoreNumberLength) {
-          if (input.selectionEnd === inputValue.length) {
-            const trimLength = coreNumber.length - this.#maxCoreNumberLength;
-            newValue = newValue.slice(0, newValue.length - trimLength);
-            rejectReason = "max-length";
-          } else {
-            this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-              source: "paste",
-              rejectedInput: pastedRaw,
-              reason: "max-length"
-            });
-            return;
-          }
-        }
       }
-      this.#setTelInputValue(newValue);
-      const caretPos = selStart + sanitised.length;
-      input.setSelectionRange(caretPos, caretPos);
-      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
-      if (rejectReason) {
-        this.#dispatchEvent(EVENTS.STRICT_REJECT, {
-          source: "paste",
-          rejectedInput: pastedRaw,
-          reason: rejectReason
-        });
-      }
-    };
-    this.#ui.telInputEl.addEventListener("paste", handlePasteEvent, {
-      signal: this.#abortController.signal
-    });
-  }
+    }
+    this.#setTelInputValue(newValue);
+    const caretPos = selStart + sanitised.length;
+    input.setSelectionRange(caretPos, caretPos);
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    if (rejectReason) {
+      this.#dispatchEvent(EVENTS.STRICT_REJECT, {
+        source: "paste",
+        rejectedInput: pastedRaw,
+        reason: rejectReason
+      });
+    }
+  };
   //* Adhere to the input's maxlength attr.
   #truncateToMaxLength(number) {
     const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
@@ -4521,7 +4541,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.2"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4544,6 +4564,9 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   onChangeCountry = noop,
   onChangeValidity = noop,
   onChangeErrorCode = noop,
+  onOpenCountryDropdown,
+  onCloseCountryDropdown,
+  onStrictReject,
   usePreciseValidation = false,
   inputProps = {},
   disabled = void 0,
@@ -4557,6 +4580,13 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const lastEmittedCountryRef = useRef(void 0);
   const lastEmittedValidityRef = useRef(void 0);
   const lastEmittedErrorCodeRef = useRef(void 0);
+  const pendingUpdateRef = useRef(false);
+  const onOpenCountryDropdownRef = useRef(onOpenCountryDropdown);
+  const onCloseCountryDropdownRef = useRef(onCloseCountryDropdown);
+  const onStrictRejectRef = useRef(onStrictReject);
+  onOpenCountryDropdownRef.current = onOpenCountryDropdown;
+  onCloseCountryDropdownRef.current = onCloseCountryDropdown;
+  onStrictRejectRef.current = onStrictReject;
   useImperativeHandle(ref, () => ({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
@@ -4575,6 +4605,10 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     if (!itiRef.current?.isActive()) {
       return;
     }
+    if (!intlTelInput_default.utils) {
+      pendingUpdateRef.current = true;
+      return;
+    }
     const num = itiRef.current.getNumber() ?? "";
     const countryIso = itiRef.current.getSelectedCountryData()?.iso2 ?? "";
     if (num !== lastEmittedNumberRef.current) {
@@ -4603,16 +4637,40 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     usePreciseValidation
   ]);
   useEffect(() => {
-    if (inputRef.current) {
-      itiRef.current = intlTelInput_default(inputRef.current, initOptions);
-    }
+    const inputEl = inputRef.current;
+    if (!inputEl) {
+      return void 0;
+    }
+    itiRef.current = intlTelInput_default(inputEl, initOptions);
+    const handleOpen = () => onOpenCountryDropdownRef.current?.();
+    const handleClose = () => onCloseCountryDropdownRef.current?.();
+    const handleStrictReject = (e) => {
+      const { source, rejectedInput, reason } = e.detail;
+      onStrictRejectRef.current?.(source, rejectedInput, reason);
+    };
+    inputEl.addEventListener("open:countrydropdown", handleOpen);
+    inputEl.addEventListener("close:countrydropdown", handleClose);
+    inputEl.addEventListener("strict:reject", handleStrictReject);
     return () => {
+      inputEl.removeEventListener("open:countrydropdown", handleOpen);
+      inputEl.removeEventListener("close:countrydropdown", handleClose);
+      inputEl.removeEventListener("strict:reject", handleStrictReject);
       itiRef.current?.destroy();
     };
   }, []);
   useEffect(() => {
-    itiRef.current?.promise.then(seedInitialState);
-  }, [seedInitialState]);
+    itiRef.current?.promise.then(() => {
+      if (!itiRef.current?.isActive()) {
+        return;
+      }
+      if (pendingUpdateRef.current) {
+        pendingUpdateRef.current = false;
+        update();
+      } else {
+        seedInitialState();
+      }
+    });
+  }, [seedInitialState, update]);
   useEffect(() => {
     if (itiRef.current && disabled !== void 0) {
       itiRef.current.setDisabled(disabled);