Default global icon for invalid dial code

[minhluan259]

Plugin version

e.g. v23.0.10 (please try latest version)

Steps to reproduce

1. Set default telephone number 12345
2. Initial intl-tel-input on page load

Expected behaviour

Display a global icon if there is a default phone number already set with an invalid dial code.

Actual behaviour

Only arrow dropdown showing

[jackocnr]

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

[jackocnr]

It seems to work fine here: https://codepen.io/jackocnr/pen/NWVgMRp?editors=1010

So I'm not sure what the problem is. Can you reproduce it in a codepen?

[minhluan259]

The problem occurs when I use https://ipinfo.io/json

const input = document.querySelector("#phone");

const iti = window.intlTelInput(input, {
  utilsScript:
    "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
  initialCountry: "auto",
  nationalMode: 1,
  strictMode: 1,
  separateDialCode: 1,
  autoPlaceholder: "aggressive",
  geoIpLookup: (callback) => {
    fetch("https://ipinfo.io/json")
      .then(res => res.json())
      .then(data => callback(data.country.toLowerCase()))
      .catch(() => callback("us"));
  }
});

// store the instance variable so we can access it in the console e.g. window.iti.getNumber()
window.iti = iti;

[jackocnr]

Yes well it doesn't make sense to initialise the plugin with a phone number in the input, and then to set initialCountry=auto. If you already have a number, then you must already know the country, so either you (A) include the international dial code in the initial input value, which will automatically update the selected country (recommended), or (B) use initialCountry to set the correct country for the given number.

[minhluan259]

Initialize the plugin with a phone number in the input field in cases where we have a list of registered users with phone numbers but without country dial codes. Users will need to manually update the dial code after we integrate this plugin. Therefore, only the arrow showing may result in poor user experience.

[jackocnr]

Ok I'll take a look when I have a moment, and try to get it so it always shows either a flag or the globe icon no matter what initialisation options are used.

[jackocnr]

Fix released in v23.0.11 - give it a try and let me know if it works for you!

[minhluan259]

Confirmed, it works. Thank you.