Password is no longer autofilled by the browser

Flow
1

I received the fowlloing information from on of other customers.

What exactly is happening?

The username is still filled in automatically, but the password is not. In addition, the usual key icon from Microsoft Edge does not appear anymore.

Suspected technical cause

An analysis of the password field on the login page shows that the application uses a Vaadin web component for password input.

Specifically, I am using a PasswordField, not a LoginForm, …

This password field is no longer rendered as a regular HTML input element in the light DOM, but instead exists inside a Shadow DOM structure, for example:

<input slot="input" type="password" id="input-vaadin-password-field-10" autocapitalize="off">

Because of this implementation, Microsoft Edge no longer recognizes the field as a real password input. As a result, the following features are completely disabled:

  • password autofill
  • the saved-password key icon
  • automatic sign-in

This is not an issue with our browser, the client configuration, or Microsoft Edge itself. It is caused by a frontend change on your side.

Browser password managers are, by design, unable to automatically fill password fields that are implemented inside a Shadow DOM.

Are the analyses of the customer correct? Is there any way to fix this?

2

It depends on the version you are using - older and unsupported versions had this problem.

3

I updated Dec 25 from 24.9.0 to 24.9.8

May this caused the issue?

4

This should not cause an issue. The shadow dom was a problem in versions below 22

You could test with the login form. If it works there, the problem is not the shadow dom. I would guess it’s related to missing input names and attributes on your fields that you have to apply to get browser to use autofill correctly.

5

I use the com.vaadin.flow.component.textfield.PasswordField and set the label “Passwort” (german). It is working for Chrome and Safari - Edge not.

Additional information: I do not use the PasswordField directly. I have a extended own class to add a Prefix-Component, … But I do not think this is an issue?

6

Totally understandable - you need to configure “setAutocomplete” with the correct password type, e.g. CURRENT or NEW to ensure the browser knows how to act.

7

I didn’t know about .setAutocomplete(Autocomplete.NEW_PASSWORD), so had to try it.
My “change password” form has two fields: new pw and retype new pw, so I set both to NEW_PASSWORD

Before I did this, it always auto-filled the 1st field with the old password.
After I did this, it finally stopped doing that, but only when running in English.
Switching to Norwegian, it still fills in the first field with the old pw.

Stupid password manager heuristics.
In my case, I assume the fault lies with our corporate password manager; Keeper, but I don’t trust the various browsers to do this right either.

8

Perfect - thanks for your help!