Autofill triggers errors in mobile Safari

[oddball-lindsay]

Bug Report

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

Following up on this issue Autofill in Safari with va-text-input component does not work properly to see if there's an opportunity to solve this at the Platform level, as opposed to each product team needing to implement workarounds for all affected fields.

What happened

I use my mobile Safari browser's auto-fill to complete these fields, but when I try to continue it highlights the area and says it is required. Autofill is working okay on Chrome.

What I expected to happen

Auto-fill from my mobile Safari browser should be recognized as valid input.

Reproducing

• Formation version:
• Device: iPhone 13 Pro running iOS 17.6.1
• Browser: Safari (mobile)

Steps to reproduce:

1. Using mobile Safari browser, navigate to the Appoint a Representative experience in Staging
2. Proceed through the form experience until you reach the chapter requesting your information
3. Accept auto-fill when the Safari browser provides the option
4. Confirm required fields are completed
5. Select Continue
6. Errors appears
7. Re-type entry manually or add a space to the end -- the error disappears

Urgency

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

• 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

This was uncovered when QA-ing the Appoint a Representative MVP form-fill experience for the 21-22 and 21-22a forms (link to Staging) which has 7-14 required fields that a user will need to complete, depending on if they're a Veteran or associated non-Veteran claimant.

Being able to use mobile Safari's auto-fill would make the user experience smoother for any unauthenticated users; we already know from research that form experiences can be challenging and anything we can do to simplify the experience would be a huge win for product use/adoption.

Google Analytics shows Safari to be the second-most used browser for VA.gov, and about half of the users are on mobile devices.