The Phone Number (field) Drupal module has been incredibly useful in our projects, and we believe that the introduction of a new configuration setting would enhance its functionality and user experience.

Feature Request:
The requested feature involves the addition of a configuration setting that allows users to choose whether to display the flag alongside the country code in [specific context or page]. This option would provide greater flexibility for users who have varying preferences for the presentation of the flags within the module.

Details:

Name: Display Or Hide Flag with Country Code
Description: Introduce a configuration setting that allows administrators to choose whether to display the flag along with the country code in phone_number field in the webform.
Default Setting: Display both flag and country code.
Possible Values:
Display both flag and country code.
Display only the flag.
Display only the country code.
Benefits:
Customization: Users can tailor the display to meet their specific design and usability requirements.
User Experience: Provides a cleaner interface for users who may find the display of country codes unnecessary in certain contexts.
Internationalization: Supports users in diverse regions by allowing them to choose the level of detail in flag representation.
Implementation Suggestions:

Integrate the new configuration setting into the module's administrative interface.
Ensure backward compatibility with existing configurations.
Document the new setting in the module's documentation to guide administrators.

Please let us know if you require any further information or clarification on this request. We look forward to the possibility of seeing this feature in future releases.

CommentFileSizeAuthor
#16 Country selection - webform element configuration.png15.07 KBvaish
#16 Country selection - field widget settings.png18.07 KBvaish
#16 Country selection - form display.png8.34 KBvaish
#9 Webform_config.png209.49 KBshubham_kumar
#7 patch.png209.49 KBshubham_kumar
#5 Screenshot from 2023-11-23 18-38-51.png176.48 KBshubham_kumar
#4 hide_flag.patch3.86 KBshubham_kumar
#3 hide_flag.patch541 bytesshubham_kumar

Issue fork phone_number-3403595

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

nikhil_dawar created an issue. See original summary.

nikhil_dawar’s picture

nikhil_dawar commented
shubham_kumar’s picture

shubham_kumar commented
StatusFileSize
new hide_flag.patch541 bytes

I've developed a patch to hide the flag linked to the phone number field. With this patch, no additional configurations are required.

shubham_kumar’s picture

shubham_kumar commented
StatusFileSize
new hide_flag.patch3.86 KB

I've noticed an additional requirement. According to your specifications, a configuration field is needed to control the visibility of the flag icon. Accordingly, I've created a patch that allows for the convenient hiding or displaying of the flag icon. To hide the flag icon, you can enable the "Disable Flag field" option in the phone element. From Your form build Settings

shubham_kumar’s picture

shubham_kumar commented
StatusFileSize
new Screenshot from 2023-11-23 18-38-51.png176.48 KB

Screenshot For Your back-end configuration

shubham_kumar’s picture

shubham_kumar commented
shubham_kumar’s picture

shubham_kumar commented
StatusFileSize
new patch.png209.49 KB

Screenshot For your Back-end form configuration

shubham_kumar’s picture

shubham_kumar commented
shubham_kumar’s picture

shubham_kumar commented
StatusFileSize
new Webform_config.png209.49 KB

Screenshot For Your backed web-form Configuration

nikhil_dawar’s picture

nikhil_dawar commented
nikhil_dawar’s picture

nikhil_dawar commented

mahtab_alam made their first commit to this issue’s fork.

mahtab_alam opened merge request !15

mahtab_alam’s picture

mahtab_alam commented
Status: Active » Needs review

vaish made their first commit to this issue’s fork.

vaish’s picture

vaish commented
Title: Display Or Hide Flag with Country Code » Add setting to display flag or country code in the Country field
Version: 2.0.0-alpha5 » 2.0.x-dev
Assigned: nikhil_dawar » Unassigned
StatusFileSize
new Country selection - form display.png8.34 KB
new Country selection - field widget settings.png18.07 KB
new Country selection - webform element configuration.png15.07 KB

Commit in #15 improves upon the previous version in several ways.

1. Just hiding flag creates ambiguous situation for calling code +1 which is used by multiple countries. It's not possible to know which country is actually selected by looking at the country calling code alone. To solve this issue, the new commit displays two-letter country code when the flag is hidden.

2. Previous version was incomplete, it was covering only webform element but not regular Drupal core field. New commit adds the following missing features:

  • implement "Country selection" field widget setting with two options: "Flag" and "Two letter country code".
  • add new setting to the field schema
  • webform element: move "Country selection" setting into the Phone number settings fieldset for better usability.
  • add tests for the new feature

3. This MR also includes fix for the failed phpunit test FunctionalJavascript\SelectCountryTest::testCountrySelect(). Failure was caused by a change introduced in Drupal 10.2. For details see comment #121 in Drupal core issue #3316274: Stabilize FunctionalJavascript testing AJAX: add ::assertExpectedAjaxRequest(). In this particular case usage of assertWaitOnAjaxRequest() was not needed.

4. Since I was already working in this area, I also did some clean up of inefficient JavaScript code in setCountry() function.

  • I chained removeClass() and addClass() methods. Previously code was doing two independent tree traversals.
  • I removed unnecessary for loop that was going through all the options in Country select list in order to find the selected one. Selected option can be accessed directly without the loop.

Form display
Country selection - form display

Field widget settings
Country selection - field widget settings

Webform element configuration
Country selection - webform element configuration

vaish’s picture

vaish commented
chrisolof’s picture

chrisolof
he/him
Primary language English
commented
Status: Needs review » Reviewed & tested by the community

Excellent improvements here. The current state of the MR seems to work well and does not appear to be disruptive to existing installations.
Thanks everyone!

  • vaish committed 376f2289 on 2.0.x authored by mahtab_alam 
    Issue #3403595 by Shubham_Kumar, vaish, nikhil_dawar: Add setting to...
vaish’s picture

vaish commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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