[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.

[PauloGasparSv]

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

I don't think it's unique to password fields : / the email field also has the same problem. I thought it would be important so I show it after 22 seconds on the video I attached.

But I agree, these styles are important now that we have the dark mode so let's bring it to slack.

[PauloGasparSv]

@marcaaron I feel you would explain this issue better than me on slack. Do you want to bring this to over there or can I do it?

Also, should we bring this to #engineering-chat or another room? I think some people that have strong opinions on the design may not see the message if we send it there.

[luacmartins]

Gonna close this since we CP'ed the fix and it solved the issue

[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.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.34-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix autofill colors #13164

If no regressions arise, payment will be issued on 2022-12-08. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty