Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Steps to reproduce
- In webform build settings, add a field of type "Telephone" (from "Advanced elements" section)
- In telephone settings, enable "Enhance support for international phone numbers?" + set "Initial country" to "- None -"
- 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
Comment | File | Size | Author |
---|---|---|---|
#12 | 3084002-12.patch | 5.38 KB | jrockowitz |
| |||
#11 | 2019-10-02_15-37_1.png | 42.93 KB | davidferlay |
#11 | 2019-10-02_15-37.png | 31.07 KB | davidferlay |
#11 | 2019-10-02_15-31.png | 28.93 KB | davidferlay |
#9 | Screenshot_2019-10-01 Contact Example.png | 11.36 KB | sorlov |
Comments
Comment #2
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThe telephone widget is using an external library and this is the default behavior.
From: https://github.com/jackocnr/intl-tel-input#demo-and-examples
Comment #3
davidferlay CreditAttribution: davidferlay at Skilld commentedIt'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 ?
Comment #4
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedI 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.
Comment #5
davidferlay CreditAttribution: davidferlay at Skilld commentedRoger that @jrockowitz, thanks for your answers
Comment #6
davidferlay CreditAttribution: davidferlay at Skilld commentedI 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 :
TLDR : the issue is that there is no ability in webform Telephone field type settings to configure the preferredCountries settings
Proposal :
Comment #7
davidferlay CreditAttribution: davidferlay at Skilld commentedComment #8
andypostSurely it is
Comment #9
sorlov CreditAttribution: sorlov at Skilld commentedAdded Preferred countries to Telephone settings, so you can select countries that will be on top of the list.
So now it looks like:
And on webform, we have next:
Comment #10
sorlov CreditAttribution: sorlov at Skilld commentedComment #11
davidferlay CreditAttribution: davidferlay at Skilld commentedTested locally : it works like a charm and UX is even sexy ! (autocomplete tag widget)
Comment #12
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedAttached patch uses a
data
attribute so that global preferred countries can still be supported with individual tel elements can have preferred countries.Comment #13
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedSince 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.
Comment #14
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedComment #16
andypostCould use follow-up to adopt https://www.drupal.org/node/3068163
Comment #17
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented@see #3085600: [Drupal 8.8.x+] Options sorting ability has been added to Select form element