search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
457 stars 84 forks source link

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

Open HerbertsVaadin opened 4 months ago

HerbertsVaadin commented 4 months ago

Description

When I click the reveal button to show the password, the cursor is moved to the front of the input. password-field-moves-cursor-to-start 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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

@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 commented 4 months ago

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

capitalgsw commented 4 months ago

@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 commented 4 months ago

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.