bug(autocomplete): required FormControl briefly shows invalid state after selecting initial option #32956
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When mat-autocomplete uses requireSelection and the bound FormControl has Validators.required, selecting an option for the first time briefly renders the mat-form-field outline in the error state, even though a valid option was selected and the control value becomes valid.
2026-03-20-autocomplete-visual-bug.mp4
Reproduction
StackBlitz link: https://stackblitz.com/edit/hzvelmrz?file=src%2Fexample%2Fautocomplete-require-selection-example.html
Steps to reproduce:
- Open the StackBlitz reproduction.
- Focus the autocomplete input inside the outlined mat-form-field.
- Select one of the available options.
- Observe that the field border briefly turns red during the initial selection, despite the selected value satisfying the required validator.
Expected Behavior
After selecting a valid autocomplete option, the form field should remain in a valid visual state and should not briefly display the error styling.
Actual Behavior
On the initial selection of a valid option, the outlined form field briefly becomes red as if the control were invalid, then returns to the normal valid state.
Environment
- Angular: 21.2.5
- Angular CLI: 21.2.3
- @angular/cdk: 21.2.3
- @angular/material: 21.2.3
- Node.js: 22.16.0
- Package Manager: yarn 4.12.0
- TypeScript: 5.9.3
- RxJS: 7.8.2
- zone.js: 0.16.1
- OS: win32 x64