Country code not being included in input value on some iOS devices

[CulturalProfessor]

Country code not appended on some iOS Safari devices – intl-tel-input fails to include dial code in submitted value

Description

We are facing an issue where the country code is not being appended to the phone number input on some iOS devices with Safari browser when using intl-tel-input.

---

Working Example

When the country code is correctly appended:

---

Failing Example

When the country code is missing (only local number submitted):

---

Steps to Reproduce

1. Open our signup form with intl-tel-input on iOS Safari.
2. Select a country or rely on auto-detection.
3. Enter a valid phone number.
4. Submit the form.

---

Expected Result

window.iti.getNumber() should return the full number with country code (e.g., +919876543210).

---

Actual Result

window.iti.getNumber() sometimes only returns the local number (e.g., 9876543210), missing the country code entirely.

---

Code Snippet

Here’s how we initialize intl-tel-input in our form:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const input = document.querySelector("input[ms-code-phone-number]");
  const continueBtn = document.getElementById("continue-btn");
  if (!input) return;

  const preferredCountries =
    input.getAttribute("ms-code-phone-number")?.split(",") || [];

  window.iti = window.intlTelInput(input, {
    preferredCountries,
    separateDialCode: true,
    utilsScript:
      "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    customContainer: "max-width-full",
  });

  fetch("https://ipinfo.io/json")
    .then((response) => response.json())
    .then((data) => {
      window.iti.setCountry(data.country);
    })
    .catch(console.error);

  input.addEventListener("input", () => {
    const isValid = window.iti.isValidNumber();
    if (continueBtn) continueBtn.disabled = !isValid;
  });

  const form = document.getElementById("signup-form");
  form?.addEventListener("submit", async function (e) {
    e.preventDefault();
    if (isProcessingContinue) return;
    isProcessingContinue = true;

    const originalBtnText = continueBtn.textContent;
    continueBtn.innerHTML = '<span class="loading-spinner"></span>Continue';
    continueBtn.disabled = true;

    const phoneNumber = window.iti.getNumber();
    const countryData = window.iti.getSelectedCountryData();
    const countryCode = countryData.dialCode;
    const actualPhoneNumber = phoneNumber.substring(countryCode.length + 1);

    window.phoneNumberForOTP = phoneNumber;
    if (!phoneNumber) {
      isProcessingContinue = false;
      continueBtn.innerHTML = originalBtnText;
      continueBtn.disabled = false;
      return;
    }

    localStorage.setItem("phone_number", phoneNumber);

    try {
      const initiate = await hitOTPlessSdk({
        requestType: "initiate",
        request: {
          channel: "PHONE",
          phone: actualPhoneNumber,
          countryCode: `+${countryCode}`,
          deliveryChannel: "WHATSAPP",
          otpLength: 6,
          expiry: "120",
        },
      });

      if (initiate.success) {
        const phoneEvent = new CustomEvent("phoneUpdate", {
          detail: phoneNumber,
        });
        window.dispatchEvent(phoneEvent);
        document.getElementById("phone-section").style.display = "none";
        document.getElementById("otp-section").style.display = "block";
      } else {
        showError(initiate.message || "Failed to send OTP");
        continueBtn.innerHTML = originalBtnText;
        continueBtn.disabled = false;
      }
    } catch (error) {
      console.error("Error:", error);
      showError("Error sending OTP");
      continueBtn.innerHTML = originalBtnText;
      continueBtn.disabled = false;
    } finally {
      isProcessingContinue = false;
    }
  });
});
</script>

Additional Notes :

• This issue happens only on iOS Safari (and sometimes in-app browsers using WebKit).
• It seems that iti.getNumber() does not always recompute the full international number after input is typed.
• Works fine on Android Chrome.
• Would appreciate guidance on how to ensure getNumber() reliably includes country code before form submission.

[jackocnr]

I see you're using a very old version of the plugin (v17) and I'm afraid I can only provide support for the latest version (v25) so I would recommend you upgrade first and see if you're still getting the issue.

[CulturalProfessor]

@jackocnr Thanks a lot! I’ve upgraded the version and will keep you posted on whether this resolves the bug.

[CulturalProfessor]

Hey @jackocnr , we updated the script version, but this issue is still occurring for some iOS users. It always happens when accessing the site in Safari Private mode. However, the country code works if we reload with reduced protections.

Click to expand the script

document.addEventListener("DOMContentLoaded", function () {
        const input = document.querySelector("input[ms-code-phone-number]");
        const continueBtn = document.getElementById("continue-btn");
        if (!input) return;

        const preferredCountries =
          input.getAttribute("ms-code-phone-number")?.split(",") || [];

        window.iti = window.intlTelInput(input, {
          preferredCountries,
          separateDialCode: true,
          loadUtils: () =>
            import(
              "https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/js/utils.js"
            ),
        });
        input.parentElement.style.width = "100%";
        // Set country based on IP
        fetch("https://ipinfo.io/json")
          .then((response) => response.json())
          .then((data) => {
            window.iti.setCountry(data.country);
          })
          .catch(console.error);

        // Validate phone number on input
        input.addEventListener("input", () => {
          const isValid = window.iti.isValidNumber();
          if (continueBtn) {
            continueBtn.disabled = !isValid;
          }
        });

        // Handle form submission
        const form = document.getElementById("signup-form");
        form?.addEventListener("submit", async function (e) {
          e.preventDefault();

          // Prevent multiple submissions
          if (isProcessingContinue) return;
          isProcessingContinue = true;

          // Update button to show loading state
          const continueBtn = document.getElementById("continue-btn");
          const originalBtnText = continueBtn.textContent;
          continueBtn.innerHTML =
            '<span class="loading-spinner"></span>Continue';
          continueBtn.disabled = true;

          const phoneNumber = window.iti.getNumber();
          const countryData = window.iti.selectedCountryData;
          const countryCode = countryData.dialCode;
          const actualPhoneNumber = phoneNumber.substring(
            countryCode.length + 1
          );

          // Store the phone number for OTP component
          window.phoneNumberForOTP = phoneNumber;

          if (!phoneNumber) {
            isProcessingContinue = false;
            continueBtn.innerHTML = originalBtnText;
            continueBtn.disabled = false;
            return;
          }

          localStorage.setItem("phone_number", phoneNumber);

          try {
            // Initiate OTP
            const initiate = await hitOTPlessSdk({
              requestType: "initiate",
              request: {
                channel: "PHONE",
                phone: actualPhoneNumber,
                countryCode: `+${countryCode}`,
                deliveryChannel: "WHATSAPP",
                otpLength: 6,
                expiry: "120",
              },
            });

            if (initiate.success) {
              // Dispatch phone number update event
              const phoneEvent = new CustomEvent("phoneUpdate", {
                detail: phoneNumber,
              });
              window.dispatchEvent(phoneEvent);

              // Toggle views
              document.getElementById("phone-section").style.display = "none";
              const otpSection = document.getElementById("otp-section");
              otpSection.style.display = "block";
            } else {
              showError(initiate.message || "Failed to send OTP");
              continueBtn.innerHTML = originalBtnText;
              continueBtn.disabled = false;
            }
          } catch (error) {
            console.error("Error:", error);
            showError("Error sending OTP");
            continueBtn.innerHTML = originalBtnText;
            continueBtn.disabled = false;
          } finally {
            isProcessingContinue = false;
          }
        });
      });

[jackocnr]

I'm afraid I don't have an iPhone to test this with. Have you tried looking in the JS console to see if there are any errors?

Additionally, can you reproduce the problem on the demo site?

If not, it suggests the problem is with your code. I would encourage you to try to strip everything out of that page except for the telephone input and the plugin initialisation code, to try to narrow down the issue. If that works, then you know the problem is elsewhere, and you can try to re-add elements one by one until you see the problem again, to figure out what's causing it.

[CulturalProfessor]

Additionally, can you reproduce the problem on the demo site?

no it's working for this site

If not, it suggests the problem is with your code. I would encourage you to try to strip everything out of that page except for the telephone input and the plugin initialisation code, to try to narrow down the issue. If that works, then you know the problem is elsewhere, and you can try to re-add elements one by one until you see the problem again, to figure out what's causing it.

Thanks! I’ll try isolating the input and plugin to see if that fixes it.