View master password returns cursor to start of line.

[xSepticSidx]

Steps To Reproduce

When using the Chrome Browser extension on Win10 as you fill in the master password, if you select the eye (to show password) perhaps because you think you hit a wrong key etc.
The curser is sent to the start of the line and without noticing it you may be typing the wrong password in.
I.E. start typing "pass" hi "show password" continue typing "word" and then what you have is:
"wordpass" instead of password.

Expected Result

I would expect the cursor to remain where it was before hitting the "show password" icon.

Actual Result

The cursor goes to the start of the line

Screenshots or Videos

No response

Additional Context

No response

Operating System

Windows

Operating System Version

10

Web Browser

Chrome

Browser Version

Version 95.0.4638.69 (Official Build) (64-bit)

Build Version

Version: 1.54.0

[chao813]

Noticed this is an issue when using the web vault on Chrome as well, since it's using the same common jslib files. Should link this issue to the jslib repo

[jesseliu612]

Perhaps this behavior is by design.

https://github.com/bitwarden/browser/blob/d528d72b4d363c202d2a50d88d41b8ab0ba4542e/src/popup/accounts/login.component.html#L27-L29

When user click the "toggle visibility" button, it changes showPassword to true, and the type of input, which is bound to that variable, changes then. And when type changes, the behavior of the browser is to re-render the input element and thus the cursor is moved to the start.

Fixing this issue may lead to a re-design of this logic.

And please note that there are a lot of password text areas in Bitwarden, and all of them behaves like this.

[chao813]

@jesseliu612 It only behaves differently like this on chrome, every other browser it works as intended meaning this is a valid issue. Please try the togglePassword on any browser except for Chrome and then try on Chrome.

[jesseliu612]

@jesseliu612 It only behaves differently like this on chrome, every other browser it works as intended meaning this is a valid issue. Please try the togglePassword on any browser except for Chrome and then try on Chrome.

This is a Chromium issue.

You can test with other websites where you can also toggle the password visibility, such as: https://www.cssscript.com/demo/toggle-password-visibility/

All of them works great on Firefox and Safari, but all failed on Chrome.

[chao813]

Yes it is a Chromium issue but there are ways to work around it so the behavior is the same on all browsers. Chrome has an odd quirk where the focus event fires before the cursor is moved into the field.

[jesseliu612]

Yes it is a Chromium issue but there are ways to work around it so the behavior is the same on all browsers. Chrome has an odd quirk where the focus event fires before the cursor is moved into the field.

I won't deny that there could be workaround but I do think this issue should be solved upstream. Otherwise, implementing a workaround could result in a huge amount of code to be modified. (and quite dirty)

[xSepticSidx]

https://www.cssscript.com/demo/toggle-password-visibility/

I too tried this site, does the same on Edge as it does on Chrome.

[eliykat]

Fixed in bitwarden/jslib#561.

[jesseliu612]

have submitted this issue to chromium.
track it here:
https://bugs.chromium.org/p/chromium/issues/detail?id=1274477
@xSepticSidx @chao813

[eliykat]

Thanks @jesseliu612, I've subscribed to that bug report and will revert these workarounds if/when the upstream issue is fixed.