Skip to content

Format phone numbers for PhoneForm initial value#5628

Merged
aduth merged 1 commit intomainfrom
aduth-phone-form-formatted-initial
Nov 23, 2021
Merged

Format phone numbers for PhoneForm initial value#5628
aduth merged 1 commit intomainfrom
aduth-phone-form-formatted-initial

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Nov 22, 2021

Extracted from: #5619

Why:

  • Fixes an issue where if the phone number is used in a PhoneInputComponent (in LG-5333, and after LG-5399), the intl-tel-input library could have trouble parsing the country of an arbitrary, user-entered number value, resulting in a scenario where the flag dropdown appears as an empty gray box.
  • Presumably it is easier to read a nicely-formatted phone number than a string of 6-14 numbers (cc @anniehirshman-gsa)
  • It matches how the number is actually saved and sent with the attributes bundle, allowing a user to make corrections if they spot an issue
  • It matches the behavior where a user's existing phone number automatically pre-fills the input

Screenshots:

Screenshots taken with revisions in #5619 to use PhoneInputComponent on IAL2 address verification step.

Before After
image image

**Why**:

- Because if the phone number is used in a PhoneInputComponent (in LG-5333, and after LG-5399), the intl-tel-input library could have trouble parsing the country of an arbitrary, user-entered number value, resulting in a scenario where the flag dropdown appears as an empty gray box.
- Because presumably it is easier to read a nicely-formatted phone number than a string of 6-14 numbers.
Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@anniehirshman-gsa
Copy link
Contributor

LGTM! Do the parentheses and dashes automatically appear when the user types a numeric input?

@aduth
Copy link
Contributor Author

aduth commented Nov 22, 2021

LGTM! Do the parentheses and dashes automatically appear when the user types a numeric input?

The changes here only affect the initial page load. After page load, it behaves the same as phone inputs behave everywhere else ("add phone", hybrid step), which doesn't auto-format the text in any way, except when switching from one country to another.

Is that something we'd want? Might be worth a ticket to implement.

@anniehirshman-gsa
Copy link
Contributor

LGTM! Do the parentheses and dashes automatically appear when the user types a numeric input?

The changes here only affect the initial page load. After page load, it behaves the same as phone inputs behave everywhere else ("add phone", hybrid step), which doesn't auto-format the text in any way, except when switching from one country to another.

Is that something we'd want? Might be worth a ticket to implement.

OK great! I'm cool to leave the phone inputs alone for now except for this improvement on load, since IIRC it currently accepts a variety of user inputted formatting (dashes, no dashes, etc), which is good. Just wanted to check!

@aduth aduth merged commit 0911d12 into main Nov 23, 2021
@aduth aduth deleted the aduth-phone-form-formatted-initial branch November 23, 2021 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants