Inspecting value of input in DOM differs from value returned by querySelectorAll

[tbarmann]

Plugin version

24.6.0

Steps to reproduce

1. Given a phone number that includes a country code, inspecting the dom shows the input has a value that includes the country code:

<input id="phone_numbers__number" type="text" class="iti__tel-input" value="+1 (304) 419-3245" size="30"
name="phone_numbers[][number]" autocomplete="off" data-format-type-value="phone"
data-phone-number-target="phoneNumber" data-contact--editor-target="phoneNumber"
data-intl-tel-input-id="0" placeholder="(xxx) xxx-xxxx">

As you can see, the value is "+1 (304) 419-3245".

However when I run this in the browser console:

document.querySelectorAll("#phone_numbers input[type='text']").forEach((p) => console.log(p.value));

The result is "(304) 419-3245"

Why does not it contain the "+1" shown as part of the value in the input element?

The problem is vexing because I am using a testing suite in Rails that uses Capybara to find the selectors and get
their values. I don't have access to Javascript in the testing suite.

Expected behaviour

The document query should return the value that includes the country code.

Actual behaviour

The value of the input does not contain the country code

Initialisation options

List any options you're using e.g. loadUtils or onlyCountries

    this.phoneInput = intlTelInput(this.phoneNumberTarget, {
      initialCountry: "US",
      countryOrder: ["US", "CA", "ES", "GB", "PH"], // these appear first. country codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
      loadUtilsOnInit: () => import("intl-tel-input/utils"),
      customPlaceholder: (selectedCountryPlaceholder) =>
        selectedCountryPlaceholder.replace(/\d/g, "x"),
    });

[rashadmehtab]

You are doing the wrong method. The correct method is to call the getNumber() function to retrieve the full international number, including the country code.

const inputs = document.querySelectorAll("#phone_numbers__number");
inputs.forEach(function(input){
  const iti = intlTelInput(input);  // Initialize the intlTelInput on the input field
  const number = iti.getNumber();   // Use the getNumber() method to get the full international number
  console.log(number);  // Output: The full phone number, e.g., "+1 (304) 419-3245"
});

[tbarmann]

I think you are misunderstanding the issue. I don't have access to Javascript in the testing suite. I used the value method in my example to demonstrate what the testing suite sees. The tests are written in Ruby and uses selectors to get values of the inputs.

[rashadmehtab]

Here is the solution:

document.querySelectorAll(".iti").forEach((ele) => {
  const dialCodeElement = ele.querySelector('.iti__selected-dial-code');
  const phoneInputElement = ele.querySelector('.iti__tel-input');

  if (dialCodeElement && phoneInputElement) {
    console.log(`${dialCodeElement.innerText} ${phoneInputElement.value}`);
  }
});

[tbarmann]

Thank you!