[3.x] Localization of phone field with country select not possible

[vandres]

Describe the bug

We would like to use the phone input and allow the country selection as offered. Our website is in German and English and we create a form per language.

I think the localization of that field is missing at the moment. All texts are in English and not changable.

Docs:

https://intl-tel-input.com/examples/localise-countries.html

Steps to reproduce

1. Create a form with a phone field and country selection
2. open the field on a German site
3. all interface texts are in English

Form settings

• Multi-page form: Yes
• Submission Method: Ajax
• Client-side Validation: Yes
• Custom Form Templates: No

Craft CMS version

5.3.x

Plugin version

3.x

Multi-site?

"Yes"

Additional context

No response

[engram-design]

My only issue with using the intl-tel-input internationalisation is that languages are tree-shaken, and that in order to make the given language dynamic, we would need to load in every language translation into the front-end JS for Formie so that they can be switched to after build time.

This makes the phone-country.js filesize go from 39kb to 194kb (minified) which isn't great by any means.

I'll have to have a look at some more advanced options, possibly creating our own translations somehow.

[vandres]

It would be great anyway, to be able to overwrite those translations. Especially the interface texts...

[engram-design]

If anything, it'll probably be the goal to use Craft's/Formie's static translations which are probably already ready for things like country names. It'll just be figuring out how to supply those to a JS component we don't have control over!

[vandres]

In the end, the translations are just JS objects: https://github.com/jackocnr/intl-tel-input/blob/master/src/js/intl-tel-input/i18n/de/interface.ts

[engram-design]

Yep, aware of that. We'll have to construct our own for a specific language (the one you configure the field to use), rather than bundle them all at the JS build step.