bug(material/chip): Text wrap does not work in the mdc chip input.

[Siddhu-K]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Material 14

Description

the new mdc chip input does not have text wrap.
the text overflows out of the chip and the mat-form-field and I am not able to remove the chip.

Reproduction

Steps to reproduce:

1. chip input with inputted text longer than the width of the field

Expected Behavior

Text wraps to the next line or the chip has text-overflow: ellipsis so that it can be removed.

Screenshot from Material v14

Actual Behavior

text overflows out of the chip and the mat form field. chip cannot be removed.

Screenshot from Material v15

Environment

Angular CLI: 15.0.2
Node: 16.18.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 15.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version

@angular-devkit/architect 0.1500.2
@angular-devkit/build-angular 15.0.2
@angular-devkit/core 15.0.2
@angular-devkit/schematics 15.0.2
@angular/cdk 15.0.1
@angular/material 15.0.1
@angular/material-moment-adapter 15.0.1
@schematics/angular 15.0.2
rxjs 7.6.0
typescript 4.8.4

[Siddhu-K]

I also used this solution to solve the bug when text has more than 3 lines wrapped in v14.
#14934 (comment)

[Siddhu-K]

I did some testing and found how to get the old behaviour back but I am not sure how to get the change without using !important

I used the the following to get the behavior prior to mdc migration.
.mdc-evolution-chip__text-label { white-space: normal !important; line-height: normal !important; }

And to deal with multiple lines like #14934 (comment) I used
.mat-mdc-chip { height: fit-content !important; padding-top: 7px; padding-bottom: 7px; }

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}