Doesn't work with multiple phone fields

I fixed this issue for me. Also I have implemented function witch allow entering in the input field only symbols from phone number (digits, +, -, ()). Format of JS changed to ECMAScript 6.

Code looks good. RTBC+1

The patch #2 didn't work for me when editing a page that has two phone numbers.
Probably works when creating a page, but it didn't work for me when editing.

I can confirm what jcmartinez says in #6. When I have two separate fields, phone and fax, on the same edit page they seem to conflict and they switch back and forth with losing the country code / which field passes validation.

I'm guessing that these two issues may be related.

Hi folks,

I've added to the patch from #2 to address this multiple values issue as well as the issue reported on #3143446: Flag not selected on node editing form forces user to re-select which deals with initializing the input when the value is being edited.

There is some sketchy stuff in the JS for this, which I've tried to clean up just enough to make things work and a bit more standard for Drupal use. The crux of the functionality remains as-is. Long term, I think it may make more sense to provide a @Element plugin for providing the input as a first-class form element.

Change Summary

• Incorporates all changes from #2
• Added a "display" textfield element to the widget to use w/JS input (described below)
• Refactored JS to utilize jQuery in attach behavior, targeting the context (newly-added page content) only
• JS fix for preventing re-initialization of the intlTelInput, which was breaking reordering of field values
• Changed the "value" input to be a plain text field input for non-JS input, converted to a hidden input when JS initializes
• Implemented "display" input as hidden by default, shown and given the intlTelInput when JS initializes
• Implemented JS functionality to update hidden "value" input with value of "display" input as it's updated

Testing Instructions

1. Create new content with a telephone field
2. Edit and existing value for a telephone field
3. Create new content with a multi-value telephone field
4. Edit and existing value for a multi-value telephone field
5. Reorder (and edit?) a multi-value telephone field
6. Verify validation via constraint (is using telephone_validation)
7. Else?

Another adjustment, this time to the libraries handling.

I've got some fairly complicated forms, lots entities embedded within entities (IEF) and a lot of AJAX updates, and I was running into an issue with the ITI library initializing. Tracked it down to the utils.js helper library not being loaded.

This change includes utils.js as a part of the library definition and removes it from the ITI initialization option. I've also created a second library definition to be used for the module's JS that depends on the ITI library.

Found another issue caused by copying the widget's $element form array, causing a duplicate "value" for the field.

Attached is a patch to correct this.

I tried the patch in #12 and was getting the telephone fields duplicated.

Did not check previous patches, just used core/once to handle the issue with multiple fields, tested on real project, works like a charm

I tested the patch mentioned in #12, and it was successful for me. However, I believe we should format the hiddenInput to INTERNATIONAL rather than E164, as the placeholder suggests the presence of spaces.

It would be nice if in the future we added a format option to display the field

Reset of code of #17

I think I see what happened. It seems Ahmad's #17 patch mistakenly missed somethings, #18 is a re-roll of #12 with his desired change to INTERNATIONAL format rather than E164.

This is a big undertaking. While I do believe it is ideal to tackle issues distinctly, the frequency of updates to this module has made it such that a big change affecting multiple bugs is inevitable. I will review this further. I plan to add tests as described in #10. Thanks, everyone.

Option 1: intlTelInputWithUtils
If you're not concerned about filesize (e.g. you're lazy loading this script), the easiest thing to do is to just use the full bundle (/build/js/intlTelInputWithUtils.js), which comes with the utils script included. This script can be used exactly like the main intlTelInput.js - so it can either be loaded directly onto the page (which defines window.intlTelInput like usual), or it can be imported like so: import intlTelInput from "intl-tel-input/intlTelInputWithUtils".
-- https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#loading-th...

Given this is loaded when the widget is used, let's adopt the above implementation in lieu of the changes made from #11.

Never mind. That intlTelInputWithUtils.js doesn't even come with the package. Must be outdated docs.

The issue tag for Commerce is Commerce 2.x. Since somebody used another tag, that has been renamed Commerce 2.x (duplicate) to make clear it should not be used.

Got a test added and refactored the work from the above patches and MR !8. Good job and thanks , everyone.

Absolutely! Thanks for calling that out, @johnpicozzi. I'll take a moment to look through the other tickets which may have influenced the total sum of changes captured here. Thanks everyone for your patches, MRs, and review.