From d512fa348635590f1eb01f02312098923b77e547 Mon Sep 17 00:00:00 2001 From: Andy Kuny Date: Mon, 19 Aug 2024 14:05:30 -0400 Subject: [PATCH 1/2] 10463-bug: change type attribute from "tel" to "text" for phone number input elements so that users can write "N/A" as instructed on mobile, if necessary --- .../src/views/AddPetitionerToCase/AddPetitionerToCase.tsx | 2 +- web-client/src/views/ContactEdit.tsx | 2 +- web-client/src/views/EditPetitionerInformationInternal.tsx | 2 +- .../src/views/Practitioners/PractitionerContactForm.tsx | 4 ++-- web-client/src/views/StartCase/ContactPrimary.tsx | 2 +- web-client/src/views/StartCase/ContactPrimaryUpdated.tsx | 2 +- web-client/src/views/StartCase/ContactSecondary.tsx | 2 +- web-client/src/views/StartCase/ContactSecondaryUpdated.tsx | 2 +- web-client/src/views/StyleGuide/Forms.tsx | 4 ++-- web-client/src/views/UserContactEditForm.tsx | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/web-client/src/views/AddPetitionerToCase/AddPetitionerToCase.tsx b/web-client/src/views/AddPetitionerToCase/AddPetitionerToCase.tsx index 6c46c0fa788..e649da8ce36 100644 --- a/web-client/src/views/AddPetitionerToCase/AddPetitionerToCase.tsx +++ b/web-client/src/views/AddPetitionerToCase/AddPetitionerToCase.tsx @@ -224,7 +224,7 @@ export const AddPetitionerToCase = connect( data-testid="add-petitioner-phone" id="phone" name="contact.phone" - type="tel" + type="text" value={form.contact.phone || ''} onChange={e => { updateFormValueSequence({ diff --git a/web-client/src/views/ContactEdit.tsx b/web-client/src/views/ContactEdit.tsx index df17eeaca49..8e5187359a1 100644 --- a/web-client/src/views/ContactEdit.tsx +++ b/web-client/src/views/ContactEdit.tsx @@ -104,7 +104,7 @@ export const ContactEdit = connect( data-testid="phone-number-input" id="phone" name="contact.phone" - type="tel" + type="text" value={form.contact.phone || ''} onBlur={() => { validatePetitionerSequence(); diff --git a/web-client/src/views/EditPetitionerInformationInternal.tsx b/web-client/src/views/EditPetitionerInformationInternal.tsx index 72d1e7477a1..fb5626869fa 100644 --- a/web-client/src/views/EditPetitionerInformationInternal.tsx +++ b/web-client/src/views/EditPetitionerInformationInternal.tsx @@ -181,7 +181,7 @@ export const EditPetitionerInformationInternal = connect( className="usa-input max-width-200" id="phone" name="contact.phone" - type="tel" + type="text" value={form.contact.phone || ''} onBlur={() => { validatePetitionerSequence(); diff --git a/web-client/src/views/Practitioners/PractitionerContactForm.tsx b/web-client/src/views/Practitioners/PractitionerContactForm.tsx index fdca63306f1..f3eab1c22cf 100644 --- a/web-client/src/views/Practitioners/PractitionerContactForm.tsx +++ b/web-client/src/views/Practitioners/PractitionerContactForm.tsx @@ -68,7 +68,7 @@ export const PractitionerContactForm = connect( data-testid="practitioner-phone-input" id="phone" name="contact.phone" - type="tel" + type="text" value={form.contact.phone || ''} onBlur={() => { onBlurValidationSequence(); @@ -94,7 +94,7 @@ export const PractitionerContactForm = connect( className="usa-input" id="additional-phone" name="additionalPhone" - type="tel" + type="text" value={form.additionalPhone || ''} onChange={e => { onChangeUpdateSequence({ diff --git a/web-client/src/views/StartCase/ContactPrimary.tsx b/web-client/src/views/StartCase/ContactPrimary.tsx index cc3ea99473e..16b80966a18 100644 --- a/web-client/src/views/StartCase/ContactPrimary.tsx +++ b/web-client/src/views/StartCase/ContactPrimary.tsx @@ -251,7 +251,7 @@ export const ContactPrimary = connect( data-testid="phone" id="phone" name="contactPrimary.phone" - type="tel" + type="text" value={data.contactPrimary.phone || ''} onBlur={() => { onBlurSequence(); diff --git a/web-client/src/views/StartCase/ContactPrimaryUpdated.tsx b/web-client/src/views/StartCase/ContactPrimaryUpdated.tsx index a160aa37035..953f5ccfa02 100644 --- a/web-client/src/views/StartCase/ContactPrimaryUpdated.tsx +++ b/web-client/src/views/StartCase/ContactPrimaryUpdated.tsx @@ -249,7 +249,7 @@ export const ContactPrimaryUpdated = connect< id="primary-phone" name="contactPrimary.phone" ref={registerRef && registerRef('contactPrimary.phone')} - type="tel" + type="text" value={addressInfo.phone || ''} onBlur={() => { handleBlur({ diff --git a/web-client/src/views/StartCase/ContactSecondary.tsx b/web-client/src/views/StartCase/ContactSecondary.tsx index f461130fe92..560eaa58a42 100644 --- a/web-client/src/views/StartCase/ContactSecondary.tsx +++ b/web-client/src/views/StartCase/ContactSecondary.tsx @@ -201,7 +201,7 @@ export const ContactSecondary = connect( data-testid="contact-secondary-phone-input" id="secondaryPhone" name="contactSecondary.phone" - type="tel" + type="text" value={data.contactSecondary.phone || ''} onBlur={() => { onBlurSequence(); diff --git a/web-client/src/views/StartCase/ContactSecondaryUpdated.tsx b/web-client/src/views/StartCase/ContactSecondaryUpdated.tsx index 3e43229c2a9..30296d66116 100644 --- a/web-client/src/views/StartCase/ContactSecondaryUpdated.tsx +++ b/web-client/src/views/StartCase/ContactSecondaryUpdated.tsx @@ -169,7 +169,7 @@ export const ContactSecondaryUpdated = connect< id="secondary-phone" name="contactSecondary.phone" ref={registerRef && registerRef('contactSecondary.phone')} - type="tel" + type="text" value={addressInfo.phone || ''} onBlur={() => { handleBlur({ diff --git a/web-client/src/views/StyleGuide/Forms.tsx b/web-client/src/views/StyleGuide/Forms.tsx index c28ae910eda..4aee0435b93 100644 --- a/web-client/src/views/StyleGuide/Forms.tsx +++ b/web-client/src/views/StyleGuide/Forms.tsx @@ -85,7 +85,7 @@ export const Forms = () => ( @@ -96,7 +96,7 @@ export const Forms = () => ( Error message diff --git a/web-client/src/views/UserContactEditForm.tsx b/web-client/src/views/UserContactEditForm.tsx index a59cd5fe9c0..3caebda5438 100644 --- a/web-client/src/views/UserContactEditForm.tsx +++ b/web-client/src/views/UserContactEditForm.tsx @@ -62,7 +62,7 @@ export const UserContactEditForm = connect( data-testid="phone-number-input" id="phone" name="contact.phone" - type="tel" + type="text" value={form.contact.phone || ''} onBlur={() => { validateUserContactSequence(); From f68d49ed92d3ec2c9b5c3d1d74163d00c97d2e89 Mon Sep 17 00:00:00 2001 From: Andy Kuny Date: Tue, 20 Aug 2024 09:13:00 -0400 Subject: [PATCH 2/2] Remove styling for no-longer-used "tel" input els in forms.scss --- web-client/src/styles/forms.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/web-client/src/styles/forms.scss b/web-client/src/styles/forms.scss index 006921b942d..cbc85c45fab 100644 --- a/web-client/src/styles/forms.scss +++ b/web-client/src/styles/forms.scss @@ -126,7 +126,6 @@ legend { input[type='email'], input[type='number'], -input[type='tel'], input[type='text'], textarea, select {