Configure nationalMode for International Telephone Input - jquery.intl-tel-input

Created on 4 May 2022, over 2 years ago
Updated 13 April 2023, over 1 year ago

This might not be possible until the next major release, but I wanted to at least open the discussion!

Problem/Motivation

Presently, the webform module sets the nationalMode option to false ( https://git.drupalcode.org/project/webform/-/blob/6.1.x/js/webform.eleme... ).

Looking at the documentation for the library ( https://github.com/jackocnr/intl-tel-input#initialisation-options ), it's recommended to leave nationalMode to true for UX reasons.

nationalMode
Type: Boolean Default: true
Allow users to enter national numbers (and not have to think about international dial codes). Formatting, validation and placeholders still work. Then you can use getNumber to extract a full international number - see example. This option now defaults to true, and it is recommended that you leave it that way as it provides a better experience for the user.

Steps to reproduce

N/A

Proposed resolution

Remove the option override so that nationalMode follows the default recommendation. We would also have to use the hiddenInput option in order to prevent any sort of shift in the data that the element collects.

See https://www.drupal.org/project/webform_intl_tel_national_mode β†’ for the recommended implementation.

Remaining tasks

TBD

User interface changes

The UX would change for all users based on https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/nati...

API changes

None

Data model changes

None

Thanks so much for considering!

✨ Feature request
Status

Closed: won't fix

Version

6.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ͺπŸ‡ΈSpain Peacog

    Thanks @Luke.Leber for the patch. I would like to see this being a configurable option. I think it makes sense to have a setting on the Elements configuration page that is off by default but that can be switched on to enable nationalMode. I've created a patch for 6.1.x that does that.

  • πŸ‡ͺπŸ‡ΈSpain Peacog

    Added missing schema for tests

  • Status changed to Closed: won't fix over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

    I think it is getting very challenging to support every configuration setting available for advanced elements.

    The options for the international telephone element are easily customized via JavaScript.'

    The below JavaScript can be added globally or to an individual form (see attached).

    // @see https://github.com/jackocnr/intl-tel-input#options
    Drupal.webform = Drupal.webform || {};
    Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
    Drupal.webform.intlTelInput.options = Drupal.webform.intlTelInput.options || {};
    Drupal.webform.intlTelInput.options.nationalMode = true;
    
  • Status changed to Needs review over 1 year ago
  • πŸ‡ͺπŸ‡ΈSpain Peacog

    Thank you. That's a much better solution :)

  • Status changed to Closed: won't fix over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I ran into a hard blocker with the hiddenInput option that's needed to preserve backwards compatibility with data collection.

    I'm fine with maintaining https://www.drupal.org/project/webform_intl_tel_national_mode β†’ for the foreseeable future if this isn't going to be an option in Webform proper.

    @Peacog -- feel free to add an issue to https://www.drupal.org/project/webform_intl_tel_national_mode β†’ for turning this on / off -- we can do it with third party settings :)

Production build 0.71.5 2024