I have an app that, on session timeout, allows the user to open a popup with a form to sign back in again. For the purposes of this question, the app requires MFA. The test below is with Google Chrome (on Ubuntu) using Google Chrome's own built-in password manager, where the user has saved a password. When the popup is first displayed, the information is shown as an overlay mucking up / hard to read with the placeholder text:
Immediately after the user clicks into the popup window, the information actually reaches the field and the display adjusts to what it would look like if they manually entered data:
Each of these is a TextField MUI element, also from Google.
I understand that the password manager might not want to fill in values on a page the user has had no interaction with, so there's security value in waiting until that first click. I also understand highlighting in blue the fields the password manager can autofill, and that's fine. But how can I get the display to not look so ugly (showing this to users leads to bad UX) when the login popup first loads?
