Components: bug(input): Chrome autofill should set the form to valid

[dahaupt]

Bug, feature request, or proposal:

Probably a bug, but standard HTML input has the same issue in Chrome. Maybe anyone has an idea for a workaround.

What is the expected behavior?

Form changes state to valid if the autofill of Chrome fills input fields.

What is the current behavior?

You have to click inside the form / app to activate the autofill value and the state of the form changes to valid.

What are the steps to reproduce?

Plunker not possible, screenshot right after the start of the app:

This is only happening at the initial start of the app!

What is the use-case or motivation for changing an existing behavior?

Changing the state of the form to valid if the autofill value of Chrome is passed in.

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.9,
Google Chrome 56
Material Beta 2
Windows 10

Is there anything else we should know?

I'm not sure if anyone else noticed this. It's not that bad but it looks confusing.

[dahaupt]

I've read this on stackoverflow and @mmalerba already mentioned something in that direction.

The problem in Chrome browser: it does not allow access to the value of the password field after autofill (before user click on the page). So, there are two ways:

1. remove validation of the password field;
2. disable password autocompletion.

If nobody else has an idea I will close this and remove the validation because I think that's the best thing atm for login pages (in Google Chrome!).

[mmalerba]

@dahaupt another idea would be to add validation only after the user interacts in some way (focus or input event maybe)

[wautersj]

@mmalerba Yes, That's how I usually take care of it.
Example: Never disable the login button based on validation, and when the login button is pressed it either redirects the user after successful login, or I show validation feedback.

Yet again. It's an issue that needs to be addressed.

[murilobd]

I'm on Angular 4 with Material Beta 8 and still facing this issue!

[AbakumovAlexandr]

Why was this closed?

Still not resolved in Angular Material 5.1.1.

[denishvachhani]

I am facing same issue with Angular 5.1.2 - Would like to know if you anyone has figured out this one?

[tadamczak]

Vote to reopen :)

[mmalerba]

I've added some utilities for dealing with chrome autofill, they're available in 6.0.0-beta.2 https://github.com/angular/material2/blob/6.0.0-beta-2/src/lib/input/autofill.ts I would hold off on using it just yet though, the whole thing is being moved into the CDK soon: https://github.com/angular/material2/pull/9831

The AutofillMonitor detects when a field becomes autofilled, so you should be able to listen for that and re-check the validation.

[MarkPieszak]

@mmalerba Is there any chance this is going into a patched minor version of 5.x or is it only going to be available when 6.0 comes out?

[kostia-lev]

https://github.com/angular/material2/blob/master/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.html

cannot make autofill work, ngoninit - form is not on the page yet, afterwards, it does not react on autofill event on chrome:-(, checked on angular 6, material 6

[rams-fullstack]

Is there any work around for this issue? to make form valid when chrome autofill the fields

[KevCJones]

I'm just here for a solution but issue is on my project too. I'll be checking some SO suggestions like emitting an event in ngAfterViewInit to trigger change detection maybe? Or simulation of click.. same idea

[kherock]

So I've found that the main issue here is that Angular's RequiredValidator doesn't acknowledge inputs with autofilled input before the user has interacted with the page. The proper fix would probably need to be implemented in @angular/forms.

Regardless here's the workaround I've come up with that works pretty flawlessly:
https://gist.github.com/kherock/fad4c320c5894ec68373588e338955c5

[jagshub]

@kherock I tried the above gist, Inside ngOnInit this._elementRef.nativeElement.value does not get the value still !
so i did tried "this._valueAccessor.onChange('dummy_trigger')" and that enabled the submit button and did not alter the input texts, so it works that way. but i dont know what's happening.

[kherock]

@jagshub You won't be able to read the values, that's a security measure by Chrome. Here's an example that highlights how my workaround fixes things. You can see that the actual model value is blank up until mousedown when values are autofilled.

https://stackblitz.com/edit/autofillmon-validate

[jagshub]

thanks @kherock .

[maxi7587]

I had the same issue. Solved it by adding a (change)="inputChange($event)" output in the form tag to trigger the following method:

inputChange(data) {
    data.control.setValue(data.$event.target.value);
}

[luizptm]

@jagshub You won't be able to read the values, that's a security measure by Chrome. Here's an example that highlights how my workaround fixes things. You can see that the actual model value is blank up until mousedown when values are autofilled.

https://stackblitz.com/edit/autofillmon-validate

I will try to solve this problem in my app. The only issue is that the form is not so simple as a login form.

[rokulis]

why this issue is closed?

[alex-osman]

This is an important issue, please re-open until fixed

[N-Andronopoulos]

A simple (and paranoid) fix which worked for me:

<input matInput 
  (change)="fixAutoFill($event, pwd.value)" 
  placeholder="Username"
  [formControl]="username" 
  name="username" 
  required>

<input matInput
  #pwd 
  placeholder="Password" 
  [formControl]="password" 
  type="password" 
  name="password" 
  required>

username = new FormControl('', [Validators.required, Validators.email]);
password = new FormControl('', [Validators.required]);

fixAutoFill(usr: Event, pwd: string) {
  if (usr) { this.username.setValue((usr.target as HTMLInputElement).value) }
  if (pwd) { this.password.setValue(pwd) }
}

[rbinsztock]

Please reopen this issue.

Working in Firefox, Edge
Bug is present in lastest Chrome 74 on Windows 10

Angular 7.2

I reproduce the same behavior for Chrome Autofill when :

• Open the url in tab -> load the page -> form inputs validation are not triggered -> if I click on page, event on each input are triggered and the validation is updated on display.

• With a page reload -> page is loading -> form inputs validation are triggered, event on each inputs are triggered and the validation is already displayed.

I can simulate a click inside the DOM to update the validations or disable autofill with Chrome. I tried to use ChangeDetectorRef but did not help to trigger the input validation.

I don't understand why input changes does not get triggered until the user click somewhere on the DOM page.

Thank you. I will try to add a simple example to reproduce the issue.

Here a gif reproducing the issue :

[rbinsztock]

So I've found that the main issue here is that Angular's RequiredValidator doesn't acknowledge inputs with autofilled input before the user has interacted with the page. The proper fix would probably need to be implemented in @angular/forms.

Regardless here's the workaround I've come up with that works pretty flawlessly:
https://gist.github.com/kherock/fad4c320c5894ec68373588e338955c5

I tried to use it with Angular 7.2 but it's not fixing the inputs validation, I still need to click on the page for input validation to be triggered.

[mmalerba]

As was mentioned earlier in this issue, it is not possible to know the autofilled values until the user interacts with the page. There is no way around this, it's a security feature of Chrome.

As @kherock demonstrated, it would be possible for the RequiredValidator to detect that _something_ is autofilled, though again, you can't actually read those values until the user interacts with the page. However, this change would need to be made in @angular/forms since that's where RequiredValidator lives. I've created an issue for forms here: https://github.com/angular/angular/issues/30616 please use that issue instead.

[rbinsztock]

With monkey patch used on https://autofillmon-validate.stackblitz.io/ the user does not need to interact with the page for form validation to be triggered. You can see the Submit button enabled when the page is loaded. I tried the monkey patch with Angular 7.2 but does not get the same behavior.

[mmalerba]

Here's a version of the above stackblitz with the versions updated to @<7.3, seems to work: https://stackblitz.com/edit/autofillmon-validate-qdrmvt?file=app/app.component.ts

[rbinsztock]

Here's a version of the above stackblitz with the versions updated to @<7.3, seems to work: https://stackblitz.com/edit/autofillmon-validate-qdrmvt?file=app/app.component.ts

Thank you @mmalerba, so the monkey patch only work for MD directive ? https://stackblitz.com/edit/autofillmon-validate-roxxqi I tried with custom input component.

[mmalerba]

The monkey patch works on input and textarea elements with a required attribute. Depending on how your component is implemented you may have to tweak it. Angular Material component APIs are designed so that the user puts the required attribute directly on a native input so that patch works as-is for Angular Material inputs

[billyjov]

The Monkey patch only works for me on firefox and still failed on chrome

[Mexxim]

Possible workaround:
set the first input to autofocus which introduces a light flicker but triggers the :valid pseudo-class

[rbinsztock]

Possible workaround:
set the first input to autofocus which introduces a light flicker but triggers the :valid pseudo-class

it trigger the validation for the first input only but the form state is still invalid until the user click/interact somewhere on the page.

[Hassan-Moin]

The Monkey patch not working for me on chrome iOS. Testing on iPhone XS and iOS 12 >

[laukstein]

This bug is still relevant, happens on Chrome 76. Has anyone filled Chrome bug for it?
Update: https://bugs.chromium.org/p/chromium/issues/detail?id=352527 is related to it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}