bug(MatDatePicker): Datepicker label overflows over Icon

[cassied]

Is this a regression?

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

The previous version in which this bug was not present was

14.2.7

Description

Currently updating from v. 14.2.7 to 16.2.7 (16.2.8 on stackblitz), and I noticed that the date picker isn't handling long labels correctly. Instead of showing an ellipsis, it's overflowing to behind the calendar icon. See examples below:

Version 16.2.8 (bad): https://stackblitz.com/edit/8enoqa?file=src%2Fexample%2Fdatepicker-overview-example.html

Version 14.2.7 (good): https://stackblitz.com/edit/c2yh3u?file=src%2Fapp%2Fdatepicker-overview-example.html

Note: Version 15.2.9 is also showing an incorrect label.

Reproduction

StackBlitz link: https://stackblitz.com/edit/8enoqa?file=src%2Fexample%2Fdatepicker-overview-example.html Steps to reproduce:

1. Wrap a datepicker in a div with a set width.
2. Set mat-form-field width to 100% of the parent width.
3. Set label to be longer than available space.
4. Observe label filling entire input, including icon space, instead of overflowing with ellipsis

Expected Behavior

The label should fit in the allotted space and not show behind the calendar icon.

Actual Behavior

The datepicker label is filling the entire input, behind the calendar icon.

Environment

• Angular: 16.2.7 / 16.2.8 (stackblitz)
• CDK/Material: 16.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[es-diego]

I found a workaround for this issue, adding this scss rule:

label.mat-mdc-floating-label {

    &:not(.mdc-floating-label--float-above) {
        width: 100%
    }

    mat-label {
        text-overflow: ellipsis;
        overflow: hidden;
    }
}