angular / angular/components

bug(MatChipList): matChipInputFor changes height of MatFormField (Chips Autocomplete)

Open
#20,197 1 comment 12 reactions 0 assignees View on GitHub
area: material/chips area: material/form-field material spec P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

https://material.angular.io/components/chips/examples

Steps to reproduce:
1. When `mat-form-field` is empty (no value is set) the height is 65.5px
2. When `mat-chip` is added height is 79.5px.

#### Expected Behavior

`mat-form-field` should not change its height.

#### Actual Behavior

`mat-form-field` changes its height when first value is added.

#### Environment

- Angular: latest
- CDK/Material: latest
- Browser(s): Chrome (latest)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Start with the Chips Autocomplete example at material.angular.io/components/chips/examples and reproduce the height change between an empty mat-form-field and one containing its first mat-chip. Trace the matChipInputFor and mat-form-field behavior involved; done means the field keeps the same height after the first chip is added.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.