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