Skip to content

Commit a049de4

Browse files
authored
fix(material/datepicker): incorrect appearance when used in MDC form field (#23028)
We were missing the `mat-mdc-form-field-control` class on the date range input which caused its start input to disappear, because it didn't have a line height.
1 parent 150d5af commit a049de4

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

src/material/datepicker/date-range-input.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,9 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
247247
// The datepicker module can be used both with MDC and non-MDC form fields. We have
248248
// to conditionally add the MDC input class so that the range picker looks correctly.
249249
if (_formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
250-
_elementRef.nativeElement.classList.add('mat-mdc-input-element');
250+
const classList = _elementRef.nativeElement.classList;
251+
classList.add('mat-mdc-input-element');
252+
classList.add('mat-mdc-form-field-control');
251253
}
252254

253255
// TODO(crisbeto): remove `as any` after #18206 lands.

0 commit comments

Comments
 (0)