angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

bug(MatDatePicker): Datepicker label overflows over Icon #27952

Open cassied opened 1 year ago

cassied commented 1 year ago

Is this a regression?

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 image

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

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.

image

Actual Behavior

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

image

Environment

es-diego commented 9 months ago

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;
    }
}