Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HerbertsVaadin opened this issue May 16, 2024 · 7 comments
Labels
bug Something isn't working Impact: Low known issue Known issue that can't be easily fixed Severity: Minor vaadin-text-field

Comments

@HerbertsVaadin
Copy link

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
Copy link
Contributor

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

@yuriy-fix yuriy-fix added known issue Known issue that can't be easily fixed bug Something isn't working Severity: Minor Impact: Low vaadin-text-field labels May 16, 2024
@HerbertsVaadin
Copy link
Author

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
Copy link
Member

@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
Copy link

capitalgsw commented May 17, 2024

@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
Copy link
Member

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

@capitalgsw
Copy link

@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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Impact: Low known issue Known issue that can't be easily fixed Severity: Minor vaadin-text-field
Projects
None yet
Development

No branches or pull requests

5 participants