Browsers ruin password UX with dropdown menus. How can I fix it?
FYI the image above was taken with
autocomplete="new-password"
As you can see, the dropdown is covering the error message (which ends in "letters and numbers" (plus a few other error messages).
This error message is IMPORTANT, and the user MUST see it, so how do I hide the dropdown? The dropdown is preventing the user from seeing the message. You could say that "The dropdown is bad UX" in this particular circumstance
You could say to move the message below the field, but then we have the exact same problem, just from the other direction.
As far as I can tell, our solutions are:
- disable dropdown
- move message to a place where the dropdown won't cover it (like a popup or to the side)
- Move the message so it is always displayed on the opposite side to the dropdown
Option 1 doesn't work because we used to be able to disable the dropdown by setting autocomplete to "new-password" or "off" or "false" or whatever, but none of these things seem to disable the dropdown anymore.
Option 2 doesn't really work because I want the message to be near the field to give the error message some context. I don't really want a popup with the error message "You password is too short" because that seems like bad UX also. I guess I could move the error messages to the side of the password input, but that wouldn't work on small devices that don't have the screen width.
Option 3 also doesn't seem very good because the error message is moving around based on the scroll position of the window, and moving text based on some arbitrary scroll line also seems like bad UX.
So yeah, I'm out of options, unless anybody can think of any?
Is this a browser problem? Or is there one simple trick I can use to get the good UX I desire?