Date picker overlay does not work correctly with mat-form-field

[akcoder]

Versions

• Angular version: 15.2
• component version: 6.0.4

Describe the bug When using a <mat-form-field> form control, the date picker popup is cutoff by the form field frame. https://imgur.com/a/b6TwSz5

To Reproduce Create a form field using:

<mat-form-field>
    <mat-label>Date Range</mat-label>
    <input type="text" name="daterangeInput" matInput [showCustomRangeLabel]="true"
            [showRangeLabelOnInput]="true"
            [locale]="{customRangeLabel: 'Custom range'}" #dp
            ngxDaterangepickerMd [ranges]="ranges" [maxDate]="maxDate"/>
    <div matSuffix>
        <mat-icon (click)="$event.stopPropagation(); openDatePicker()" role="button">date_range</mat-icon>
    </div>
</mat-form-field>

Expected behavior The full overlay to show.

Screenshots Working (without mat-form-field)

Broken (with mat-form-field). As can be (barely) seen in this screenshot, only the top dozen or so pixels of the overlay are visible.

Stackblitz link N/A

Additional context The ngx-daterangepicker-material control worked correctly with Angular 14. I suspect it broke with ng15 with the march to using MDC (material design components for web).

[jeevan900929]

I am facing a similar issue where the picker is clipped within a material dialog's content area.

I have used drops='up', which causes it to break:

[kimlambiguitoppolis]

same issue

[zebt]

In my case, adjusting the styles of mat-form-field child class element helped: (apply the style with additional parent class)

.mdc-text-field {
    overflow: unset !important;
    will-change: auto !important;
}

[lmarquinez]

I am using also ngx-daterangepicker-material library, and I have updated withangular material v15 from legacy components to MDC components. After this migration the date picker is no longer visible, or it does not work.

I have tried adding appearance="outline" in the mat-form-field and at least it is visible but underneath everything. Even so I don't want it to be outline, but without adding an appearance o with appearance="fill" it does not appear.

<mat-form-field>
        <mat-label></mat-label>
        <input matInput placeholder="Date" ngxDaterangepickerMd [(ngModel)]="initialDates"
            [locale]="locale" [ranges]="ranges" [minDate]="minDate" [alwaysShowCalendars]="true" [autoApply]="true"
            [showDropdowns]="true" [showWeekNumbers]="true" opens="center" [linkedCalendars]="false" readonly="true"
            (rangeClicked)="rangeClicked($event)" (startDateChanged)="setStart($event)"
            (endDateChanged)="setEnd($event)" (datesUpdated)="onClose()"/>
</mat-form-field>

I have also tried adding the following rule:

input.mat-mdc-input-element::-webkit-calendar-picker-indicator {
   display: block !important;
}

In addition to this one which is the one suggested in the migration guide:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
    display: block !important;
}