Phone number input needs to allow more than 10 character for international numbers

[fiorella-io]

Bug Report

• [X] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

We are using the phone number input component on the form we are about to launch, Burial 21P-530EZ. One of the new fields we are adding is an international number field. The current phone number component only allows for 10 characters. We need an international version of this component.

What I expected to happen

To not see the following error while entering more than 10 characters into the input field.

Reproducing

• n/a

Steps to reproduce:

1. Go to the Burial form on staging
2. Navigate to Step 1, Contact information
3. Enter a number larger than 10 characters

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

• [x] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [ ] This bug is not blocking any work
• [ ] Other

Details

[humancompanion-usds]

When you say "current phone number component" what are you referring to? I'm not aware of a phone number component. There is a phone number pattern.

va-text-input supports a pattern regex that can be used to validate any regex you pass to it: https://design.va.gov/storybook/?path=/docs/uswds-va-text-input--pattern

Our current pattern example uses that component: https://staging.va.gov/mock-form-patterns/phone-and-email-address

<input class="usa-input" id="inputField" type="tel" aria-invalid="false" pattern="^\d{3}-?\d{3}-?\d{4}$" name="root_homePhone" autocomplete="tel" required="" part="input">

Is what you are asking for to extend that pattern to support an international number in the home and mobile fields? It's going to be tough to come up with a regex that works for both US and International numbers (well, at least to me it seems like a challenge). You can see the pattern above for US numbers. Here is a pattern for Int'l numbers:

^\+(?:[0-9] ?){6,14}[0-9]$

[humancompanion-usds]

Here is the StackOverflow accepted answer:

\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|
2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|
4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$

At any rate, if your team is not using the codified pattern in the Forms Library then you can do this with the va-text-input today. Just change the label and the pattern prop regex. If you are using the codified pattern (and you should be), then we need to make a variation that supports i18n numbers, or change the accepted pattern to also accept i18n numbers. That decision needs to come to Design System Council thus making this an experimental request. So if you can clarify, we can get you on the docket.

[fiorella-io]

yes, can we extend the va-text-input pattern to support international numbers on a new international number field?

[steele-lm]

@humancompanion-usds Yes, this would be the phone number pattern. @Midge-dev confirmed that we are using the codified pattern, but it is built in a way where it needs it's schema helper to function correctly. We would have to implement our own custom pattern that uses the suggested regex and produces a v3 styled component.

[humancompanion-usds]

@steele-lm - You can have your team contribute a variation to the phone number pattern that offers support for an international number. Alternatively, I can put it on the backlog for the Veteran-facing Forms team to work on but, it will be awhile before we get to it. If you want to go the former route, your engineers can talk to @rhasselle-oddball or @ndsprinkle about extending that pattern.