intl-tel-input 27.1.2 → 27.2.0

package/dist/js/intlTelInputWithUtils.mjs

@@ -2991,7 +2991,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);
@@ -3513,6 +3513,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 = {}) {
@@ -3702,176 +3704,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,
@@ -3879,37 +3916,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"));
@@ -4551,7 +4571,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.1.2"
+    version: "27.2.0"
   }
 );
 var intlTelInput_default = intlTelInput;

package/package.json

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

package/react/README.md

@@ -3,3 +3,11 @@
 A React component for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the [source code](https://github.com/jackocnr/intl-tel-input/blob/master/react/src/IntlTelInput.tsx).
 
 [Explore docs »](https://intl-tel-input.com/docs/react-component)
+
+## Running the demos locally
+
+1. Initialise the submodules: `git submodule update --init --recursive`
+2. Install dependencies: `npm install`
+3. Build: `npm run build`
+
+You can then open `react/demo/validation/index.html` in your browser to try the validation demo. View the full list of [available demos](https://github.com/jackocnr/intl-tel-input/tree/master/react/demo).

package/react/dist/IntlTelInput.d.ts

@@ -2,6 +2,8 @@ import intlTelInput, { Iti } from "intl-tel-input";
 import React from "react";
 export { intlTelInput };
 type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "onInput">;
+export type StrictRejectSource = "key" | "paste";
+export type StrictRejectReason = "invalid" | "max-length";
 export type IntlTelInputRef = {
     getInstance: () => Iti | null;
     getInput: () => HTMLInputElement | null;
@@ -11,6 +13,9 @@ declare const IntlTelInput: React.ForwardRefExoticComponent<Partial<import("intl
     onChangeCountry?: (iso2: string) => void;
     onChangeValidity?: (isValid: boolean) => void;
     onChangeErrorCode?: (errorCode: number | null) => void;
+    onOpenCountryDropdown?: () => void;
+    onCloseCountryDropdown?: () => void;
+    onStrictReject?: (source: StrictRejectSource, rejectedInput: string, reason: StrictRejectReason) => void;
     usePreciseValidation?: boolean;
     inputProps?: InputProps;
     disabled?: boolean | undefined;