Mat Autocomplete With Required Input Flashes Error on Option Select

[jdvoeller]

Bug, feature request, or proposal:

If a mat autocomplete has a required input, the input flashes red/invalid briefly upon selecting an item from the autocomplete. This only happens if nothing has been typed in the input field.

What is the expected behavior?

The input should not flash red if an option is in progress of being selected

What is the current behavior?

The input briefly shows as red as an option is selected

What are the steps to reproduce?

Stackblitz: https://stackblitz.com/edit/angular-vtjbve

Reproduction Steps:

1. Click the input
2. Click an option

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

Can be confusing for end users to see an error flash like that

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

Angular: 8.2.13 Material: 8.2.3 OS: win32 x64 TypeScript: 3.5.3 Browsers tested: Chrome Version: 79.0.3945.130

Is there anything else we should know?

N/A

[maybeec]

is there any timeline on that? I seems, that it has even been fixed already in a PR. I would love to see it.

[AnnaRainier]

would really need this fix

[eatondustin1]

@crisbeto any update on this issue? Are the tests still failing?

[Ronald91]

Still replicable on Angular 12.2.15 and Angular Material 12.2.13.

[basstune]

Hi, this is still reproducible in Angular/Angular Material 13.1.1.

[RomainVidal666]

Still replicable with 14.1.0

I use a custom ErrorStateMatcher who check on dirty state to avoid this problem.

The form is not validated when you leave it empty, maybe it can work with a control.untouch check.

export class DirtyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty));
  }
}

[richhartz]

this solved the issue for me, for now and the validation still appears later.

  onBlur(control: AbstractControl) {
    control.markAsUntouched();
  }

[imanamirtaheri]

this solved the issue for me, for now and the validation still appears later.

  onBlur(control: AbstractControl) {
    control.markAsUntouched();
  }

Thanks to @richhartz for the suggestion. If a user does not select any item from the autocomplete options by simply clicking on another element, this workaround prevents the error to be shown. Maybe a more complete workaround can be this one:

onBlur(control: AbstractControl) { // workaround for https://github.com/angular/components/issues/18313 control.markAsUntouched(); setTimeout(() => { control.markAsTouched(); }, 100); }

[jimmy1993k]

this solved the issue for me, for now and the validation still appears later.

  onBlur(control: AbstractControl) {
    control.markAsUntouched();
  }

Thanks to @richhartz for the suggestion. If a user does not select any item from the autocomplete options by simply clicking on another element, this workaround prevents the error to be shown. Maybe a more complete workaround can be this one:

onBlur(control: AbstractControl) { // workaround for #18313 control.markAsUntouched(); setTimeout(() => { control.markAsTouched(); }, 100); }

While this works for already untouched inputs, when an input is already invalid it will remove the error state and reapply it after said timeout which is still better than the default but not yet ideal.