[HOLD for payment 2022-12-08] Profile - If user uses saved information, background turns white & is very hard to read

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

Pre-Condition: User has saved information on their device

1. Access staging.new.expensify.com
2. Enter a valid account
3. Tap on Profile icon > Profile > Add phone number
4. Selected the saved information option

Expected Result:

User expects the background to match the dark theme

Actual Result:

The background turns to a bright white and afterwards makes it very hard to read the text in the field

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.33-1
Reproducible in staging?: Y
Reproducible in production?: New UI
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
EXTRA: This seems to happen with any input field as long as you have saves information
https://user-images.githubusercontent.com/43996225/204415527-9c4f235c-788c-413f-b1e8-e74f78a818f7.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @marcaaron (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[marcaaron]

Not able to reproduce given these test steps. The input looks fine on my end:

What does "if the user users saved information" mean exactly? Are there missing test steps?

[marcaaron]

Oh, I think you mean "auto complete"... lemme try that.

[marcaaron]

Ok, so the user agent stylesheet will need to be overwritten in our app.

Guessing we did not notice this before because our theme was similar to the defaults that Chrome (and others) add in. I also came across this -> https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill which seems to suggest that the autocomplete UA styles can't be easily overwritten in CSS and require some hacks.

Will look around for some solution... but in the meantime... cc @shawnborton @grgia to see if you all know any workarounds.

[marcaaron]

[sobitneupane]

I had reported this bug earlier here in slack. Raising here for compensation request as a bug reporter.

[marcaaron]

Found a kind of ridiculous hack to fix this here that does work kind of perfectly.

Honestly, it's not looking good for going through the proper channels:

🥲

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[marcaaron]

I am not really sure how the staging regression could have been avoided in this case. The fix worked in one place but not for all cases. Staging did what it was supposed to in this case and the issue was caught at the right layer.

[luacmartins]

This was fixed by #13164. Closing!