intl-tel-input 19.0.1 → 19.1.0

package/src/js/intlTelInput.js

@@ -34,6 +34,8 @@ const defaults = {
   excludeCountries: [],
   // fix the dropdown width to the input width (rather than being as wide as the longest country name)
   fixDropdownWidth: true,
+  // format the number as the user types
+  formatAsYouType: true,
   // format the input value during initialisation and on setNumber
   formatOnDisplay: true,
   // geoIp lookup function
@@ -756,23 +758,72 @@ class Iti {
 
   // initialize any key listeners
   _initKeyListeners() {
-    // update flag on keyup
-    this._handleKeyupEvent = () => {
+    let userOverrideFormatting = false;
+    // update flag on input event
+    this._handleKeyEvent = (e) => {
       if (this._updateFlagFromNumber(this.telInput.value)) {
         this._triggerCountryChange();
       }
+
+      // if user types their own formatting char (not a plus or a numeric), then set the override
+      if (e && e.data && /[^+0-9]/.test(e.data)) {
+        userOverrideFormatting = true;
+      }
+      // if user removes all formatting chars, then reset the override
+      else if (!/[^+0-9]/.test(this.telInput.value)) {
+        userOverrideFormatting = false;
+      }
+
+      if (this.options.formatAsYouType && !userOverrideFormatting) {
+        // maintain caret position after reformatting
+        const currentCaretPos = this.telInput.selectionStart;
+        const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
+        const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
+        const isDeleteForwards = e && e.inputType === "deleteContentForward";
+        const formattedValue = this.formatNumberAsYouType();
+        const newCaretPos = this._translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
+        this.telInput.value = formattedValue
+        this.telInput.setSelectionRange(newCaretPos, newCaretPos);
+      }
     };
-    this.telInput.addEventListener("keyup", this._handleKeyupEvent);
+    this.telInput.addEventListener("input", this._handleKeyEvent);
 
     // update flag on cut/paste events (now supported in all major browsers)
     this._handleClipboardEvent = () => {
       // hack because "paste" event is fired before input is updated
-      setTimeout(this._handleKeyupEvent);
+      setTimeout(this._handleKeyEvent);
     };
     this.telInput.addEventListener("cut", this._handleClipboardEvent);
     this.telInput.addEventListener("paste", this._handleClipboardEvent);
   }
 
+  // iterate through the formattedValue until hit the right number of relevant chars
+  _translateCursorPosition(relevantChars, formattedValue, prevCaretPos, isDeleteForwards) {
+    // if the first char is a formatting char, and they backspace delete it:
+    // cursor should stay at the start (pos 0), rather than stick to the first digit (pos 1)
+    if (prevCaretPos === 0 && !isDeleteForwards) {
+      return 0;
+    }
+    let count = 0;
+    for (let i = 0; i < formattedValue.length; i++) {
+      if (/[+0-9]/.test(formattedValue[i])) {
+        count++;
+      }
+      
+      // normal case: stop when you hit the right number of relevant chars
+      // (cursor will be just after the final relevant char)
+      if (count === relevantChars && !isDeleteForwards) {
+        return i + 1;
+      }
+      // spacial case: delete forwards (fn + delete on a mac):
+      // wait until hit one extra relevant char, and put the cursor just before it (after any formatting chars)
+      if (isDeleteForwards && count === relevantChars + 1) {
+        return i;
+      }
+    }
+    return formattedValue.length;
+  }
+
   // adhere to the input's maxlength attr
   _cap(number) {
     const max = this.telInput.getAttribute("maxlength");
@@ -1666,7 +1717,7 @@ class Iti {
     }
 
     // unbind key events, and cut/paste events
-    this.telInput.removeEventListener("keyup", this._handleKeyupEvent);
+    this.telInput.removeEventListener("input", this._handleKeyEvent);
     this.telInput.removeEventListener("cut", this._handleClipboardEvent);
     this.telInput.removeEventListener("paste", this._handleClipboardEvent);
 
@@ -1746,6 +1797,14 @@ class Iti {
       : null;
   }
 
+  // format the number as the user types
+  formatNumberAsYouType() {
+    const val = this._getFullNumber().trim();
+    return window.intlTelInputUtils
+      ? intlTelInputUtils.formatNumberAsYouType(val, this.selectedCountryData.iso2)
+      : val;
+  }
+
   // update the selected flag, and update the input val accordingly
   setCountry(originalCountryCode) {
     const countryCode = originalCountryCode.toLowerCase();

package/src/js/utils.js

@@ -3,6 +3,24 @@ goog.provide("i18n.phonenumbers.demo");
 goog.require("i18n.phonenumbers.PhoneNumberFormat");
 goog.require("i18n.phonenumbers.PhoneNumberUtil");
 goog.require("i18n.phonenumbers.Error");
+goog.require('i18n.phonenumbers.AsYouTypeFormatter');
+
+// format the number as the user types
+const formatNumberAsYouType = (number, countryCode) => {
+  try {
+    // have to clean it first, as AYTF stops formatting as soon as it hits any formatting char (even it's own)
+    // (it's designed to be fed one char at a time, as opposed to every char every time)
+    const clean = number.replace(/[^+0-9]/g, "");
+    const formatter = new i18n.phonenumbers.AsYouTypeFormatter(countryCode);
+    let result = "";
+    for (let i = 0; i < clean.length; i++) {
+      result = formatter.inputDigit(clean.charAt(i));
+    }
+    return result;
+  } catch (e) {
+    return number;
+  }
+};
 
 // format the given number to the given format
 const formatNumber = (number, countryCode, formatArg) => {
@@ -158,6 +176,7 @@ const validationError = {
 
 // exports
 goog.exportSymbol("intlTelInputUtils", {});
+goog.exportSymbol("intlTelInputUtils.formatNumberAsYouType", formatNumberAsYouType);
 goog.exportSymbol("intlTelInputUtils.formatNumber", formatNumber);
 goog.exportSymbol("intlTelInputUtils.getExampleNumber", getExampleNumber);
 goog.exportSymbol("intlTelInputUtils.getExtension", getExtension);

package/src/spec/helpers/helpers.js

@@ -127,7 +127,7 @@ var triggerInputEvent = function(type) {
 }
 
 var triggerKey = function(el, type, key) {
-  var e = new KeyboardEvent(type, { key: key });
+  var e = new KeyboardEvent(type, { key: key, data: key });
   el.dispatchEvent(e);
 };