Steps to reproduce

  1. In webform build settings, add a field of type "Telephone" (from "Advanced elements" section)
  2. In telephone settings, enable "Enhance support for international phone numbers?" + set "Initial country" to "- None -"
  3. Click "View" tab link to display rendered form

Observed result

  • Telephone field is displayed with the US flag as default value

Expected result

  • Telephone field should display with flag icon according to defined settings

Here is a screenshot, with the website language negociation settings, if that helps

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

davidferlay created an issue. See original summary.

jrockowitz’s picture

Status: Active » Closed (won't fix)

The telephone widget is using an external library and this is the default behavior.

If you leave initialCountry blank, it will default to the first country in the list.

From: https://github.com/jackocnr/intl-tel-input#demo-and-examples

davidferlay’s picture

It's quite surprising that first country in the list is not "Afghanistan" then

Any idea why US and UK are listed before all other countries alphabeticaly sorted ?

jrockowitz’s picture

I am not sure why the widget is behaving this way. You would have to look the libraries JS and configuration options and see what can be changed.

davidferlay’s picture

Roger that @jrockowitz, thanks for your answers

davidferlay’s picture

Title: Telephone field type displays US "Initial country" flag instead of none as configured » Telephone field type does not provide ability to configure preferredCountries setting of used tel library
Category: Bug report » Feature request
Status: Closed (won't fix) » Active

I did some digging and it is now clear that Telephone field is displayed with the US flag as default value because of 2 reasons found in documentation of used library :

  • initialCountry setting :
    If you leave initialCountry blank, it will default to the first country in the list.
  • preferredCountries setting :
    Type: Array Default: ["us", "gb"]. Specify the countries to appear at the top of the list.

TLDR : the issue is that there is no ability in webform Telephone field type settings to configure the preferredCountries settings

Proposal :

  1. Add ability to configure the preferredCountries settings in Telephone field type (using langcode value for ex) > DONE
  2. In addition, update "- None -" value so that it passes an empty array to lib to get no prefered default value (as explained by maintainer here) > DONE
  3. Optional - In addition, add ability to set value "Auto", as described in doc under "geoIpLookup" section :
    use this option to specify a custom function that looks up the user's location, and then calls the success callback with the relevant country code
davidferlay’s picture

Issue summary: View changes
andypost’s picture

Category: Feature request » Bug report

Surely it is

sorlov’s picture

Added Preferred countries to Telephone settings, so you can select countries that will be on top of the list.

So now it looks like:
configuration UI
And on webform, we have next:
Rendered element

sorlov’s picture

Status: Active » Needs review
davidferlay’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
28.93 KB
31.07 KB
42.93 KB

Tested locally : it works like a charm and UX is even sexy ! (autocomplete tag widget)

  • Case 1 : Initial country "None" displays Afghanistan's flag as expected, without default prefered values from library

  • Case 2 : Initial country "Netherlands" displays Netherlands' flag as expected

  • Case 3 : Initial country "Netherlands" + Prefered countries FR/NL/DE displays flag of Netherlands first then user click shows perefered countries as expected

jrockowitz’s picture

Version: 8.x-5.4 » 8.x-5.x-dev
Status: Reviewed & tested by the community » Needs review
FileSize
5.38 KB

Attached patch uses a data attribute so that global preferred countries can still be supported with individual tel elements can have preferred countries.

jrockowitz’s picture

Status: Needs review » Reviewed & tested by the community

Since all the tests are passing and the test webform has been updated. I am going to mark this RTBC. Please reopen if you see any issues.

jrockowitz’s picture

Status: Reviewed & tested by the community » Fixed

  • jrockowitz authored c8821fd on 8.x-5.x
    Issue #3084002 by sorlov, jrockowitz, davidferlay: Telephone field type...
andypost’s picture

+++ b/src/Plugin/WebformElement/Telephone.php
@@ -121,10 +128,24 @@ class Telephone extends TextBase {
+      '#title' => $this->t('Preferred countries'),
+      '#type' => 'select',
+      '#options' => CountryManager::getStandardList(),
...
+      '#select2' => TRUE,
+      '#multiple' => TRUE,

Could use follow-up to adopt https://www.drupal.org/node/3068163

jrockowitz’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.