fix(datepicker): prevent default dialog options from affecting… (#18657)

When the datepicker is opened in touch mode, we use a `MatDialog` which means that the `MAT_DIALOG_DEFAULT_OPTIONS` injection has an effect on them. We don't want the default to affect the datepicker's dialog, because they can make it look and behave inconsistently. These changes set values to all of the options which will override the defaults.

Fixes #18648.

src/material/datepicker/BUILD.bazel

@@ -85,6 +85,7 @@ ng_test_library(
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",
         "//src/material/core",
+        "//src/material/dialog",
         "//src/material/form-field",
         "//src/material/input",
         "//src/material/testing",

src/material/datepicker/datepicker.spec.ts

@@ -9,7 +9,7 @@ import {
   dispatchKeyboardEvent,
   dispatchMouseEvent,
 } from '@angular/cdk/testing/private';
-import {Component, FactoryProvider, Type, ValueProvider, ViewChild} from '@angular/core';
+import {Component, Type, ViewChild, Provider} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MAT_DATE_LOCALE, MatNativeDateModule, NativeDateModule} from '@angular/material/core';
@@ -18,6 +18,7 @@ import {DEC, JAN, JUL, JUN, SEP} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig} from '@angular/material/dialog';
 import {Subject} from 'rxjs';
 import {MatInputModule} from '../input/index';
 import {MatDatepicker} from './datepicker';
@@ -32,7 +33,7 @@ describe('MatDatepicker', () => {
   function createComponent(
     component: Type<any>,
     imports: Type<any>[] = [],
-    providers: (FactoryProvider | ValueProvider)[] = [],
+    providers: Provider[] = [],
     entryComponents: Type<any>[] = []): ComponentFixture<any> {
 
     TestBed.configureTestingModule({
@@ -1761,6 +1762,24 @@ describe('MatDatepicker', () => {
     }));
   });
 
+  it('should not pick up values from the global dialog config', () => {
+    const fixture = createComponent(StandardDatepicker, [MatNativeDateModule], [{
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: {
+        minWidth: '1337px',
+        hasBackdrop: false
+      } as MatDialogConfig
+    }]);
+    fixture.componentInstance.touch = true;
+    fixture.detectChanges();
+    fixture.componentInstance.datepicker.open();
+    fixture.detectChanges();
+
+    const overlay = document.querySelector('.cdk-overlay-pane') as HTMLElement;
+    expect(document.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+    expect(overlay.style.minWidth).toBeFalsy();
+  });
+
 });
 
 

src/material/datepicker/datepicker.ts

@@ -424,6 +424,20 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
       direction: this._dir ? this._dir.value : 'ltr',
       viewContainerRef: this._viewContainerRef,
       panelClass: 'mat-datepicker-dialog',
+
+      // These values are all the same as the defaults, but we set them explicitly so that the
+      // datepicker dialog behaves consistently even if the user changed the defaults.
+      hasBackdrop: true,
+      disableClose: false,
+      width: '',
+      height: '',
+      minWidth: '',
+      minHeight: '',
+      maxWidth: '80vw',
+      maxHeight: '',
+      position: {},
+      autoFocus: true,
+      restoreFocus: true
     });
 
     this._dialogRef.afterClosed().subscribe(() => this.close());