From 913ca45a2b54e2e726668157fb0ad1fbffedcd48 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Wed, 4 Mar 2020 13:54:18 -0800
Subject: [PATCH] =?UTF-8?q?fix(datepicker):=20prevent=20default=20dialog?=
 =?UTF-8?q?=20options=20from=20affecting=E2=80=A6=20(#18657)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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        |  1 +
 src/material/datepicker/datepicker.spec.ts | 23 ++++++++++++++++++++--
 src/material/datepicker/datepicker.ts      | 14 +++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
index ec13f563dd6f..bd34a54b90fd 100644
--- a/src/material/datepicker/BUILD.bazel
+++ b/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",
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index 3f104a5c4253..f97e8e5dd5bd 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/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();
+  });
+
 });
 
 
diff --git a/src/material/datepicker/datepicker.ts b/src/material/datepicker/datepicker.ts
index e395e4cf9e3e..54204b0cbd95 100644
--- a/src/material/datepicker/datepicker.ts
+++ b/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());