PasswordField: revealing password moves the cursor to the front in Chrome

[HerbertsVaadin]

Description

When I click the reveal button to show the password, the cursor is moved to the front of the input. On Firefox this works as expected.

Expected outcome

Cursor remains at the end of the input.

Minimal reproducible example

Can be replicated even in Vaadin docs:

<vaadin-password-field label="Password" value="Ex@mplePassw0rd"></vaadin-password-field>

Steps to reproduce

1. Add the PasswordField component to your view.
2. Enter some text
3. Press the "reveal" button
4. Notice how the cursor moves to the front of input.

Environment

Vaadin version(s): 24.3.12 OS: Windows 11 Browser: Chrome 125.0.6422.61

Browsers

Chrome

[TatuLund]

I played with native input element and it seems to happen with that too. I.e. this seems to be intended behavior of Chrome.

[HerbertsVaadin]

I'm not sure about it being intended. Here's a simple example of toggling password to text type, that behaves just like firefox example on chrome https://jsfiddle.net/herbis/jcu5eqny/16/

[web-padawan]

@HerbertsVaadin Thanks for sharing. In your example, focus() is called after changing the input type. Looks like this fixes the issue for Chrome. In our current implementation, mousedown event prevents the focusout event and then calls focus() before changing the input type. We might need to change this in order to keep the cursor.

[capitalgsw]

@web-padawan must have been done so recently https://vaadin-form-example.demo.vaadin.com/ it works as intended on all browsers https://vaadin-bookstore-example.demo.vaadin.com/ works correctly as well

[web-padawan]

@capitalgsw Both demos you linked use Vaadin 14 and are quite old. I confirmed that the issue is present in V23.

[capitalgsw]

@web-padawan I saw that after some interrogation to see if I can fix it facepalm At least I narrowed it down to 10 major versions :P

[web-padawan]

There was a major change to Vaadin field components in Vaadin 22, including vaadin-password-field. However, I've checked Vaadin 22.1 and there the focus is not restored after changing input type.