[HOLD for payment 2022-12-08] Web - Sign -The password is not visible in dark mode when you have autofill

[kbecciv]

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:

1. Go to staging.new.expensify.com
2. In log in page start typing your email address
3. Select any email

Expected Result:

The password is visible in dark mode when you have autofill

Actual Result:

The password is not visible in dark mode when you have autofill

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.33.1

Reproducible in staging?: Yes

Reproducible in production?: No

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Recording.1797.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 @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[PauloGasparSv]

Taking a look at it right now!

[PauloGasparSv]

I'm trying to reproduce here but the field gets highlighted for me instead making the password visible. Let me think.

[PauloGasparSv]

Ok, reproduced it here! Had to type something after it gets highlighted : )

[PauloGasparSv]

Never mind, I accidentally messed with the CSS.

I can't reproduce this, will ask for help on slack!

[PauloGasparSv]

After some time I can reproduce the error!!!! That highlight was removed and deployed but I think I had some cached JS in my browser that made it stick.

[PauloGasparSv]

For some reason the css property -webkit-transition-delay: 99999s introduced here is breaking the input.

I couldn't find any documentation about how the transition-delay or -webkit-transition-delay properties work on input fields (or anything related to this problem).

Screen.Recording.2022-11-29.at.17.00.06.mov

Trying to think of a way around this that doesn't involve reverting anything.
cc @marcaaron @luacmartins @MonilBhavsar @thesahindia can someone help me on this?

[luacmartins]

Since these autofills are based on transitions, it makes sense that "disabling" them would break this. @marcaaron any thoughts on how to fix this?

[marcaaron]

Ah hmm this sucks. Well, we can revert it but then the styles will look ugly again - so it's between ugly styles or this bug (which I think is sort of bad because it creates a confusing user experience and not a "style" issue). No sorry, I don't have any ideas let's bring it to Slack?

[marcaaron]

Since these autofills are based on transitions, it makes sense that "disabling" them would break this

Not sure if it makes sense to me. Can you explain it @luacmartins ?

It does seem unique to password fields as no other fields have been reported as affected.