Mat Chip List opon selection 扩展输入

Question

Giving the default behavior, when value is selected from a dropdown, MatChip appears within the input, but also expands it. I am a bit surprised this is the default behavior. Anyone can suggest how they fix it? Providing a forked StackBlitz demo (source take from Angular Material documentation):

DEMO

You can see in the images bellow - when chip selected, input becomes taller.

Answer 1

Problem

The problem is mat-form-field-infix class. When there are chips in the input, they increase the height.

Solution

You can set the minimal height for that class to be the same as when there are chips in the input. You can do it in the CSS file like this:

::ng-deep .mat-form-field-infix {
  min-height: 32px;
}

Working example