angular / angular/components

With horizontal listbox, first chip gets focused on parent wrapper click

Open
#15,728 16 comments 4 reactions 0 assignees View on GitHub
Accessibility area: material/chips P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
".mat-chip-list-wrapper" should not catch click event

#### What is the current behavior?
When you click outside of the chips in the ".mat-chip-list-wrapper" container that is full width due to flex property, the first chip of the wrapper get selected.

#### What are the steps to reproduce?
Use the official chips example https://odjogmnnjkj.angular.stackblitz.io/ and click on the far right of the chips. The first chip will get focused.
![chips_focus](https://user-images.githubusercontent.com/19934211/55610120-8f1e3f80-5782-11e9-9d0c-b4388df6487f.gif)

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.2.12, Material 7.3.6, Typescript 3.1.1
Issue found on:
- mac OS High Sierra with Chrome 73.0.3683.86, Safari 12.1, Firefox
- windows 10 enterprise using Chrome 73.0.3683.103, Edge and Firefox 60.6.1esr

Contributor guide

Open the contributing guide

Research direction

Start with the official chips example and reproduce the click in the empty space of the full-width .mat-chip-list-wrapper. Trace the wrapper's click and focus behavior, then verify that clicking outside the chips no longer focuses the first chip while clicking a chip still works.

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
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.