fix(material/datepicker): support for date range input in MDC-based form field (#22565)

Resolves a few issues that were preventing the use of the range picker with an MDC-based `mat-form-field`. Including:
1. Conditionally setting the `mat-mdc-input-element` class so that the input is sized correctly.
2. Triggering a state change event when the focus state changes so that the floating label is up-to-date.
3. Fixing an error being thrown inside `_shouldHideSeparator`.

Author: crisbeto

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

@@ -1,7 +1,7 @@
 <div
   class="mat-date-range-input-container"
   cdkMonitorSubtreeFocus
-  (cdkFocusChange)="focused = $event !== null">
+  (cdkFocusChange)="_updateFocus($event)">
   <div class="mat-date-range-input-start-wrapper">
     <ng-content select="input[matStartDate]"></ng-content>
     <span

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

@@ -26,6 +26,7 @@ import {MatFormFieldControl, MatFormField, MAT_FORM_FIELD} from '@angular/materi
 import {ThemePalette, DateAdapter} from '@angular/material/core';
 import {NgControl, ControlContainer} from '@angular/forms';
 import {Subject, merge, Subscription} from 'rxjs';
+import {FocusOrigin} from '@angular/cdk/a11y';
 import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion';
 import {
   MatStartDate,
@@ -243,6 +244,12 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
       throw createMissingDateImplError('DateAdapter');
     }
 
+    // The datepicker module can be used both with MDC and non-MDC form fields. We have
+    // to conditionally add the MDC input class so that the range picker looks correctly.
+    if (_formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
+      _elementRef.nativeElement.classList.add('mat-mdc-input-element');
+    }
+
     // TODO(crisbeto): remove `as any` after #18206 lands.
     this.ngControl = control as any;
   }
@@ -342,7 +349,8 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
 
   /** Whether the separate text should be hidden. */
   _shouldHideSeparator() {
-    return (!this._formField || this._formField._hideControlPlaceholder()) && this.empty;
+    return (!this._formField || (this._formField.getLabelId() &&
+      !this._formField._shouldLabelFloat())) && this.empty;
   }
 
   /** Gets the value for the `aria-labelledby` attribute of the inputs. */
@@ -351,6 +359,12 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     return formField && formField._hasFloatingLabel() ? formField._labelId : null;
   }
 
+  /** Updates the focused state of the range input. */
+  _updateFocus(origin: FocusOrigin) {
+    this.focused = origin !== null;
+    this.stateChanges.next();
+  }
+
   /** Re-runs the validators on the start/end inputs. */
   private _revalidate() {
     if (this._startInput) {

tools/public_api_guard/material/datepicker.d.ts

@@ -356,7 +356,8 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     _handleChildValueChange(): void;
     _openDatepicker(): void;
     _shouldHidePlaceholders(): boolean;
-    _shouldHideSeparator(): boolean;
+    _shouldHideSeparator(): boolean | "" | null;
+    _updateFocus(origin: FocusOrigin): void;
     getConnectedOverlayOrigin(): ElementRef;
     getStartValue(): D | null;
     getThemePalette(): ThemePalette;