angular / angular/components

Mat Autocomplete With Required Input Flashes Error on Option Select

Open
#18,313 11 comments 3 reactions 0 assignees View on GitHub
area: material/autocomplete P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.