Tel input autofill drops international prefix

Question

I have an input field of type "tel" with autocomplete enabled.

  <input type="tel" name="phone" autocomplete="tel" />

In Safari (both iOS and macOS), when I start entering a phone number with international prefix, e.g. +49 151, and then choose from the autofill options, the international prefix is removed.

Also, when I listen to change event, the prefix is already missing in event.target.value.

Here is a quick sandbox that demonstrates the issue:
https://codesandbox.io/s/lively-lake-bunh5?file=/src/app/app.component.html
(It happens to be an Angular app, but the issue is not limited to Angular)

How can I get the full phone number in Safari?

Renferd

Same, would be very keen to solve this. – Ralaigh

If i use auto fill the country code does not prefill, this is strange. – Snigger

Answer 1

I hope this might help.

A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:

"tel-country-code" The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.

"tel-national" The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".

link to above

Der

Does not give an actual answer to the question – Dundalk