Phone International field clears input value on every keystroke in Drupal 11

When using the Phone International field on a Drupal 11.2 site, the phone input does not allow entering numbers.
Each digit typed into the field is immediately cleared, as if pressing the delete key.

Steps to reproduce:

• Install Drupal 11.2 with the phone_international v4.x module enabled.
• Add a user field of type Phone International.
• Edit a user and try to type a phone number.

Notice that every keystroke clears the input, so no number can be entered.

Debugging details:

Manually setting the value in the console (input.value = '12345') persists correctly, so the clearing only happens during typing.

Adding a listener trace showed that the module’s JS behavior forces field.value('') whenever iti.getNumber() returns an empty string, effectively erasing user input.

Expected behavior:

The field should allow users to type normally, and the number formatting/validation should only update the value if it is non-empty and valid.

Update: root cause found

After further debugging, the problem was not just the way utils.js was loaded, but the fact that the module code was calling iti.getNumber() before the intl-tel-input utilities had actually loaded.

In intl-tel-input v24+ the utils script is loaded asynchronously, and the library exposes a promise (iti.promise) that resolves once the utilities are ready. If we try to use iti.getNumber() earlier, it will return an empty string and, in our case, the field was being reset on every keyup.

Proposed fix

Wrap any logic that depends on the utilities inside iti.promise.then(...). Example:

const iti = window.intlTelInput(field, options);

iti.promise.then(() => {
// Update hidden input on keyup so AJAX requests always have the correct value
field.addEventListener('keyup', () => {
field.value = iti.getNumber();
});
});

Benefits

Ensures intlTelInputUtils is available before calling getNumber().

Prevents the input field from being cleared while typing.

Makes the module compatible with intl-tel-input v24/v25 and Drupal 11.

Next steps

Patch the phone_international JS to wrap the existing keyup handler in iti.promise.then().

Confirm across different browsers and locales that the hidden field continues to be populated correctly.