angular / angular/components

Autocomplete stops showing the List when clicking in the input field after adding a Mat-Chip

Open
#17,292 12 comments 6 reactions 0 assignees View on GitHub
area: material/chips P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

Use StackBlitz to reproduce your issue:
Official Demo shows this issue.
https://run.stackblitz.com/api/angular/v1?file=app%2Fchips-autocomplete-example.ts

This example starts showing a Lemon in the autocomplete component.

Steps to reproduce:
1. Click in the Input of Autocomplete, next to the Lemon matchip
2. It properly shows the List associated
3. Click in an Option of the List, i.e "Apple". The mat-chip is added next to "Lemon".
4. Click in the Input of Autocomplete. Now it does not show the "List", as you would expect and as it did in step 2, which breaks the UIX.
5. Click outside the component (it loses the Focus)
6. Click again the Input field: it receives the Focus and the List is again shown.

#### Expected Behavior

What behavior were you expecting to see?
Users expect that clicking in the Input field would show them the List of options again, as it did in the very beginning without needing to use the "hackish" click out-and-in.

#### Actual Behavior

What behavior did you actually see?
If a Mat-chip is added, the user needs to focus out and then click to set the Focus in, in order to have the List shown.

#### Environment

- Angular: 8.1.0
- CDK/Material: Material 8.0.2
- Browser(s): Chrome, Safari, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, Ubuntu, MacOS

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and follow the listed steps in the autocomplete and mat-chip example. Inspect the focus and option-selection behavior after adding a chip; done means clicking the input immediately shows the options list again without first blurring and refocusing.

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
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.