Chrome autofill overrides existing selected autocompleted text when a password field appears...

In our app we have a payment page where a user types their email, they press next, and if the email exists we show a password field (or proceed to creating a new user if it doesn't). In as little code as possible it does this:

<div class="form">
<form>
<input [(ngModel)]="userEmail"
type="email"
name="username">

@if(hasSubmitted) {
<input type="password"
name="password">

}
</form>

<button (click)="onSubmit()">Next</button>
</div>


import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from "@angular/forms"

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {

private _email = "";
public get userEmail() {
return this._email;
}
public set userEmail(value) {
this._email = value;
this.hasSubmitted = false;
}

hasSubmitted = false;

onSubmit() {
this.hasSubmitted = true;
}
}



We show an email field and a next button. On next we check for the email and show a password field if it exists. (Though in the above I skip that part and just show the password field). The problem can be seen in the below gif (which is the code above):



In Chrome when I (and the users) manually autofill the field by clicking the field and selecting an email, and press submit, the password field will briefly appear Chrome will then autofill the email field and override it. Because of this hasSubmitted becomes false and the password field disappears.

It doesn't happen if the email is manually typed like in the video below:



Likewise if the email I select is the same as the one chrome autocompletes then the setter won't be called and the password field stays. See below:



I'm not sure what I can even do against this except disabling autocomplete on the password field

Also when I say autocomplete it's more like prefilling. Like when you open a page with a login form Chrome with fill out the username and password inputs. That's also why it's always the same email that appears.

Continue reading...