Incorrect Flag Detection Due to Phone Masking in intl-tel-input Library

[MohsinRenttango]

Actual behaviour

Currently, when attempting to enter international numbers, the library does not allow the use of the "+" symbol, resulting in incorrect flag detection. Manually changing the flag before entering the number works as expected.

Scenario 1: Right now, we have US phone masking on Intl-tel-input field. It picks US and Canadian number and changes the flag accordingly. but in the case of international numbers like PK, IND, China as it does not allow + symbol so it does not detect and auto selects the flag.
Screenshot Scenario 1:

Scenario 2: If we manually change the flag first and enter the number after that it allows to enter the international numbers
Screenshot Scenario 2:

Scenario 3: If we remove this mask all together from code then entering the phone number starting with country code automatically picks the correct flag
Screenshot Scenario 3:

Expected behavior

Entering international numbers without removing mask from code, such as those from PK, IND, or China, should automatically detect the corresponding country flag without manual intervention.

Initialization options

The library is configured with US phone masking, causing issues with the detection of international numbers.
The code is initially implemented using "Angular version 16" and "intl-tel-input version 17.0.21."

Code Snippet

public getintelInput() {
   $(document).ready(function ($: any) {
     var phoneInputID = "#cellphone_1";
     var input = document.querySelector(phoneInputID);
     iti = (<any>window).intlTelInput(input, {
       formatOnDisplay: true,
       hiddenInput: "full_number",
       preferredCountries: ["us"],
       utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js",
     });

     $(phoneInputID).on("countrychange", function (event: any) {
       // Get the selected country data to know which country is selected.
       var selectedCountryData = (<any>iti).getSelectedCountryData();

       // Get an example number for the selected country to use as placeholder.
       var newPlaceholder = (window as any).intlTelInputUtils.getExampleNumber(
         selectedCountryData.iso2,
         true,
         (window as any).intlTelInputUtils.numberFormat.INTERNATIONAL
       );
       (<any>iti).getSelectedCountryData();
       // Reset the phone number input.
       (<any>iti).setNumber((<any>iti).getNumber());

       // Convert placeholder as exploitable mask by replacing all 1-9 numbers with 0s
       var mask = newPlaceholder.replace(/[1-9]/g, "0");

       // Apply the new mask for the input
       $(phoneInputID).mask(mask);
     });
     (<any>iti).promise.then(function () {
       $(phoneInputID).trigger("countrychange");
     });
     $(document).on("click", ".k-dialog-close", function () {
       $(".loading").hide();
     });
   });
 }

[jackocnr]

This seems like an issue with your masking library, not this library! This library doesn't prevent you from typing plus or anything else!

[MohsinRenttango]

Thank you for the response. We are not utilizing an external masking library. For masking, we are using the following code:

HTML Code:

<input class="input-phone-field" type="text" minlength="5" (keyup)="onPhoneChange($event)" id="cellphone_1" maxlength="15" formControlName="phone" name="phone" />

TypeScript Code:

var newPlaceholder = (window as any).intlTelInputUtils.getExampleNumber(
  selectedCountryData.iso2,
  true,
  (window as any).intlTelInputUtils.numberFormat.INTERNATIONAL
);
(<any>iti).getSelectedCountryData();
// Reset the phone number input.
(<any>iti).setNumber((<any>iti).getNumber());

// Convert the placeholder as an exploitable mask by replacing all 1-9 numbers with 0s
var mask = newPlaceholder.replace(/[1-9]/g, "0");

// Apply the new mask for the input
$(phoneInputID).mask(mask);

Please suggest a code fix based on this information.

[jackocnr]

Well as I said, this library doesn't prohibit you from typing plus or anything else, as you can see from the demo page. So it must be your custom code that is doing this. If you comment out all of your masking code, does that fix the issue?

We are not utilizing an external masking library

You appear to be using the jQuery mask plugin, no?

$(phoneInputID).mask(mask);