Mat Autocomplete With Required Input Flashes Error on Option Select
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and follow the Angular Material autocomplete and required-input interaction when an option is clicked without prior typing. Trace the validation-state transition during selection; done means selecting an option no longer produces a visible red or invalid flash in the reproduced case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100