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, imports: Type[] = [], - providers: (FactoryProvider | ValueProvider)[] = [], + providers: Provider[] = [], entryComponents: Type[] = []): ComponentFixture { 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 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());