diff --git a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts b/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts index 00b02c34cbaf..3904bdeaf671 100644 --- a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts +++ b/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.spec.ts @@ -12,6 +12,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('DialogHarnessExample', () => { let fixture: ComponentFixture; + let fixtureTwo: ComponentFixture; let loader: HarnessLoader; beforeAll(() => { @@ -27,6 +28,8 @@ describe('DialogHarnessExample', () => { }).compileComponents(); fixture = TestBed.createComponent(DialogHarnessExample); fixture.detectChanges(); + fixtureTwo = TestBed.createComponent(DialogHarnessExample); + fixtureTwo.detectChanges(); loader = TestbedHarnessEnvironment.documentRootLoader(fixture); })); @@ -38,7 +41,7 @@ describe('DialogHarnessExample', () => { it('should load harness for dialog with specific id', async () => { fixture.componentInstance.open({id: 'my-dialog'}); - fixture.componentInstance.open({id: 'other'}); + fixtureTwo.componentInstance.open({id: 'other'}); let dialogs = await loader.getAllHarnesses(MatDialogHarness); expect(dialogs.length).toBe(2); @@ -48,7 +51,7 @@ describe('DialogHarnessExample', () => { it('should be able to get role of dialog', async () => { fixture.componentInstance.open({role: 'alertdialog'}); - fixture.componentInstance.open({role: 'dialog'}); + fixtureTwo.componentInstance.open({role: 'dialog'}); const dialogs = await loader.getAllHarnesses(MatDialogHarness); expect(await dialogs[0].getRole()).toBe('alertdialog'); expect(await dialogs[1].getRole()).toBe('dialog'); @@ -57,7 +60,7 @@ describe('DialogHarnessExample', () => { it('should be able to close dialog', async () => { fixture.componentInstance.open({disableClose: true}); - fixture.componentInstance.open(); + fixtureTwo.componentInstance.open(); let dialogs = await loader.getAllHarnesses(MatDialogHarness); expect(dialogs.length).toBe(2); diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts index 089153936790..e06bd0d57d09 100644 --- a/src/material-experimental/mdc-dialog/dialog.spec.ts +++ b/src/material-experimental/mdc-dialog/dialog.spec.ts @@ -615,8 +615,8 @@ describe('MDC-based MatDialog', () => { it('should close all of the dialogs', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); + dialog.open(PizzaMsgThree); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3); @@ -629,7 +629,7 @@ describe('MDC-based MatDialog', () => { it('should close all dialogs when the user goes forwards/backwards in history', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -642,7 +642,7 @@ describe('MDC-based MatDialog', () => { it('should close all open dialogs when the location hash changes', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -655,8 +655,8 @@ describe('MDC-based MatDialog', () => { it('should close all of the dialogs when the injectable is destroyed', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); + dialog.open(PizzaMsgThree); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3); @@ -685,7 +685,7 @@ describe('MDC-based MatDialog', () => { it('should allow the consumer to disable closing a dialog on navigation', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg, {closeOnNavigation: false}); + dialog.open(PizzaMsgTwo, {closeOnNavigation: false}); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -774,7 +774,7 @@ describe('MDC-based MatDialog', () => { it('should assign a unique id to each dialog', () => { const one = dialog.open(PizzaMsg); - const two = dialog.open(PizzaMsg); + const two = dialog.open(PizzaMsgTwo); expect(one.id).toBeTruthy(); expect(two.id).toBeTruthy(); @@ -1188,7 +1188,7 @@ describe('MDC-based MatDialog', () => { expect(document.activeElement!.id) .not.toBe( 'dialog-trigger', - 'Expcted the focus not to have changed before the animation finishes.'); + 'Expected the focus not to have changed before the animation finishes.'); flushMicrotasks(); viewContainerFixture.detectChanges(); @@ -1247,7 +1247,8 @@ describe('MDC-based MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred').toBeNull(); dispatchKeyboardEvent(document.body, 'keydown', ESCAPE); @@ -1256,7 +1257,8 @@ describe('MDC-based MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('keyboard', 'Expected the trigger button to be focused via keyboard'); + .withContext('Expected the trigger button to be focused via keyboard') + .toBe('keyboard'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1281,7 +1283,8 @@ describe('MDC-based MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred').toBeNull(); const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; @@ -1291,7 +1294,8 @@ describe('MDC-based MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('mouse', 'Expected the trigger button to be focused via mouse'); + .withContext('Expected the trigger button to be focused via mouse') + .toBe('mouse'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1317,7 +1321,8 @@ describe('MDC-based MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred').toBeNull(); const closeButton = overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement; @@ -1330,7 +1335,8 @@ describe('MDC-based MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('keyboard', 'Expected the trigger button to be focused via keyboard'); + .withContext('Expected the trigger button to be focused via keyboard') + .toBe('keyboard'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1355,7 +1361,8 @@ describe('MDC-based MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred').toBeNull(); const closeButton = overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement; @@ -1369,7 +1376,8 @@ describe('MDC-based MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('mouse', 'Expected the trigger button to be focused via mouse'); + .withContext('Expected the trigger button to be focused via mouse') + .toBe('mouse'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1959,12 +1967,26 @@ class ComponentWithTemplateRef { } } -/** Simple component for testing ComponentPortal. */ +/** Simple components for testing ComponentPortal and multiple dialogs. */ @Component({template: '

Pizza

'}) class PizzaMsg { - constructor( - public dialogRef: MatDialogRef, public dialogInjector: Injector, - public directionality: Directionality) {} + constructor(public dialogRef: MatDialogRef, + public dialogInjector: Injector, + public directionality: Directionality) {} +} + +@Component({template: '

Pizza

'}) +class PizzaMsgTwo { + constructor(public dialogRef: MatDialogRef, + public dialogInjector: Injector, + public directionality: Directionality) {} +} + +@Component({template: '

Pizza

'}) +class PizzaMsgThree { + constructor(public dialogRef: MatDialogRef, + public dialogInjector: Injector, + public directionality: Directionality) {} } @Component({ @@ -2035,6 +2057,8 @@ const TEST_DIRECTIVES = [ ComponentWithChildViewContainer, ComponentWithTemplateRef, PizzaMsg, + PizzaMsgTwo, + PizzaMsgThree, DirectiveWithViewContainer, ComponentWithOnPushViewContainer, ContentElementDialog, @@ -2052,6 +2076,8 @@ const TEST_DIRECTIVES = [ ComponentWithChildViewContainer, ComponentWithTemplateRef, PizzaMsg, + PizzaMsgTwo, + PizzaMsgThree, ContentElementDialog, DialogWithInjectedData, DialogWithoutFocusableElements, diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts index dbb8f4358f57..da676784890a 100644 --- a/src/material/dialog/dialog-animations.ts +++ b/src/material/dialog/dialog-animations.ts @@ -14,6 +14,12 @@ import { AnimationTriggerMetadata, } from '@angular/animations'; +/** + * Animation transition time used by MatDialog. + * @docs-private + */ +export const _transitionTime = 150; + /** * Animations used by MatDialog. * @docs-private @@ -28,7 +34,7 @@ export const matDialogAnimations: { // decimate the animation performance. Leaving it as `none` solves both issues. state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})), state('enter', style({transform: 'none'})), - transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)', + transition('* => enter', animate(`${_transitionTime}ms cubic-bezier(0, 0, 0.2, 1)`, style({transform: 'none', opacity: 1}))), transition('* => void, * => exit', animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))), diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index e66bae7eec05..4c1946ac2971 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -114,9 +114,6 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet { // Save the previously focused element. This element will be re-focused // when the dialog closes. this._capturePreviouslyFocusedElement(); - // Move focus onto the dialog immediately in order to prevent the user - // from accidentally opening multiple dialogs at the same time. - this._focusDialogContainer(); } /** @@ -218,7 +215,13 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet { break; case true: case 'first-tabbable': - this._focusTrap.focusInitialElementWhenReady(); + this._focusTrap.focusInitialElementWhenReady().then(focusedSuccessfully => { + // If we weren't able to find a focusable element in the dialog, then focus the dialog + // container instead. + if (!focusedSuccessfully) { + this._focusDialogContainer(); + } + }); break; case 'first-heading': this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]'); diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts index 9bc880dd75ca..7ba3f9f96ca6 100644 --- a/src/material/dialog/dialog.spec.ts +++ b/src/material/dialog/dialog.spec.ts @@ -670,8 +670,8 @@ describe('MatDialog', () => { it('should close all of the dialogs', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); + dialog.open(PizzaMsgThree); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3); @@ -697,7 +697,7 @@ describe('MatDialog', () => { it('should close all dialogs when the user goes forwards/backwards in history', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -710,7 +710,7 @@ describe('MatDialog', () => { it('should close all open dialogs when the location hash changes', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -723,8 +723,8 @@ describe('MatDialog', () => { it('should close all of the dialogs when the injectable is destroyed', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg); - dialog.open(PizzaMsg); + dialog.open(PizzaMsgTwo); + dialog.open(PizzaMsgThree); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3); @@ -754,7 +754,7 @@ describe('MatDialog', () => { it('should allow the consumer to disable closing a dialog on navigation', fakeAsync(() => { dialog.open(PizzaMsg); - dialog.open(PizzaMsg, {closeOnNavigation: false}); + dialog.open(PizzaMsgTwo, {closeOnNavigation: false}); expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); @@ -849,7 +849,7 @@ describe('MatDialog', () => { it('should assign a unique id to each dialog', () => { const one = dialog.open(PizzaMsg); - const two = dialog.open(PizzaMsg); + const two = dialog.open(PizzaMsgTwo); expect(one.id).toBeTruthy(); expect(two.id).toBeTruthy(); @@ -1320,7 +1320,7 @@ describe('MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!).toBe('program'); dispatchKeyboardEvent(document.body, 'keydown', ESCAPE); @@ -1329,7 +1329,8 @@ describe('MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('keyboard', 'Expected the trigger button to be focused via keyboard'); + .withContext('Expected the trigger button to be focused via keyboard') + .toBe('keyboard'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1353,7 +1354,7 @@ describe('MatDialog', () => { tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + expect(lastFocusOrigin!).toBe('program'); const backdrop = overlayContainerElement .querySelector('.cdk-overlay-backdrop') as HTMLElement; @@ -1363,7 +1364,8 @@ describe('MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('mouse', 'Expected the trigger button to be focused via mouse'); + .withContext('Expected the trigger button to be focused via mouse') + .toBe('mouse'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1384,12 +1386,18 @@ describe('MatDialog', () => { // Patch the element focus after the initial and real focus, because otherwise the // `activeElement` won't be set, and the dialog won't be able to restore focus to an element. patchElementFocus(button); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be focused via program') + .toBe('program'); dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef}); tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + tick(500); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred') + .toBeNull(); const closeButton = overlayContainerElement .querySelector('button[mat-dialog-close]') as HTMLElement; @@ -1402,7 +1410,8 @@ describe('MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('keyboard', 'Expected the trigger button to be focused via keyboard'); + .withContext('Expected the trigger button to be focused via keyboard') + .toBe('keyboard'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -1421,12 +1430,18 @@ describe('MatDialog', () => { // Patch the element focus after the initial and real focus, because otherwise the // `activeElement` won't be set, and the dialog won't be able to restore focus to an element. patchElementFocus(button); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be focused via program') + .toBe('program'); dialog.open(ContentElementDialog, {viewContainerRef: testViewContainerRef}); tick(500); viewContainerFixture.detectChanges(); - expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred'); + tick(500); + expect(lastFocusOrigin!) + .withContext('Expected the trigger button to be blurred') + .toBeNull(); const closeButton = overlayContainerElement .querySelector('button[mat-dialog-close]') as HTMLElement; @@ -1440,7 +1455,8 @@ describe('MatDialog', () => { tick(500); expect(lastFocusOrigin!) - .toBe('mouse', 'Expected the trigger button to be focused via mouse'); + .withContext('Expected the trigger button to be focused via mouse') + .toBe('mouse'); focusMonitor.stopMonitoring(button); document.body.removeChild(button); @@ -2020,7 +2036,7 @@ class ComponentWithTemplateRef { } } -/** Simple component for testing ComponentPortal. */ +/** Simple components for testing ComponentPortal and multiple dialogs. */ @Component({template: '

Pizza

'}) class PizzaMsg { constructor(public dialogRef: MatDialogRef, @@ -2028,6 +2044,20 @@ class PizzaMsg { public directionality: Directionality) {} } +@Component({template: '

Pizza

'}) +class PizzaMsgTwo { + constructor(public dialogRef: MatDialogRef, + public dialogInjector: Injector, + public directionality: Directionality) {} +} + +@Component({template: '

Pizza

'}) +class PizzaMsgThree { + constructor(public dialogRef: MatDialogRef, + public dialogInjector: Injector, + public directionality: Directionality) {} +} + @Component({ template: `

This is the title

@@ -2097,6 +2127,8 @@ const TEST_DIRECTIVES = [ ComponentWithChildViewContainer, ComponentWithTemplateRef, PizzaMsg, + PizzaMsgTwo, + PizzaMsgThree, DirectiveWithViewContainer, ComponentWithOnPushViewContainer, ContentElementDialog, @@ -2114,6 +2146,8 @@ const TEST_DIRECTIVES = [ ComponentWithChildViewContainer, ComponentWithTemplateRef, PizzaMsg, + PizzaMsgTwo, + PizzaMsgThree, ContentElementDialog, DialogWithInjectedData, DialogWithoutFocusableElements, diff --git a/src/material/dialog/dialog.ts b/src/material/dialog/dialog.ts index a9e4d75ad845..c14927696938 100644 --- a/src/material/dialog/dialog.ts +++ b/src/material/dialog/dialog.ts @@ -35,6 +35,7 @@ import {startWith} from 'rxjs/operators'; import {MatDialogConfig} from './dialog-config'; import {MatDialogContainer, _MatDialogContainerBase} from './dialog-container'; import {MatDialogRef} from './dialog-ref'; +import {_transitionTime} from './dialog-animations'; /** Injection token that can be used to access the data that was passed in to a dialog. */ @@ -77,6 +78,9 @@ export abstract class _MatDialogBase implemen private readonly _afterOpenedAtThisLevel = new Subject>(); private _ariaHiddenElements = new Map(); private _scrollStrategy: () => ScrollStrategy; + private _lastDialogOpenTime: number; + private _lastDialogOpenType: any; + private _lastDialogRef: MatDialogRef; /** Keeps track of the currently-open dialogs. */ get openDialogs(): MatDialogRef[] { @@ -144,6 +148,13 @@ export abstract class _MatDialogBase implemen (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`); } + // If there are open dialogs, and the last opened dialog was of the same component or template + // ref as the one opening now, check if we're still within the animation transition time of the + // previous dialog, if so, just return the MatDialogRef of the previous dialog. + if (this.openDialogs.length && componentOrTemplateRef === this._lastDialogOpenType && + this._dialogOpenedWithinPreviousTransitionTime()) { + return this._lastDialogRef; + } const overlayRef = this._createOverlay(config); const dialogContainer = this._attachDialogContainer(overlayRef, config); @@ -151,6 +162,9 @@ export abstract class _MatDialogBase implemen dialogContainer, overlayRef, config); + this._lastDialogOpenTime = new Date().getTime(); + this._lastDialogOpenType = componentOrTemplateRef; + this._lastDialogRef = dialogRef; // If this is the first dialog that we're opening, hide all the non-overlay content. if (!this.openDialogs.length) { @@ -384,6 +398,16 @@ export abstract class _MatDialogBase implemen } } + /** + * Check if a dialog was opened within the dialog animation transition time of a previous dialog. + * @return true if a dialog was opened within the dialog animation transition time, false + * otherwise. + * @docs-private + */ + _dialogOpenedWithinPreviousTransitionTime(): boolean { + return new Date().getTime() - this._lastDialogOpenTime < _transitionTime; + } + } /** diff --git a/src/material/dialog/testing/shared.spec.ts b/src/material/dialog/testing/shared.spec.ts index 284ea1c143d0..c2eefca70b83 100644 --- a/src/material/dialog/testing/shared.spec.ts +++ b/src/material/dialog/testing/shared.spec.ts @@ -12,6 +12,7 @@ export function runHarnessTests( dialogModule: typeof MatDialogModule, dialogHarness: typeof MatDialogHarness, dialogService: typeof MatDialog) { let fixture: ComponentFixture; + let fixtureTwo: ComponentFixture; let loader: HarnessLoader; let overlayContainer: OverlayContainer; @@ -32,6 +33,8 @@ export function runHarnessTests( fixture = TestBed.createComponent(DialogHarnessTest); fixture.detectChanges(); + fixtureTwo = TestBed.createComponent(DialogHarnessTest); + fixtureTwo.detectChanges(); loader = TestbedHarnessEnvironment.documentRootLoader(fixture); inject([OverlayContainer], (oc: OverlayContainer) => { overlayContainer = oc; @@ -57,7 +60,7 @@ export function runHarnessTests( it('should load harness for dialog with specific id', async () => { fixture.componentInstance.open({id: 'my-dialog'}); - fixture.componentInstance.open({id: 'other'}); + fixtureTwo.componentInstance.open({id: 'other'}); let dialogs = await loader.getAllHarnesses(dialogHarness); expect(dialogs.length).toBe(2); @@ -67,7 +70,7 @@ export function runHarnessTests( it('should be able to get id of dialog', async () => { fixture.componentInstance.open({id: 'my-dialog'}); - fixture.componentInstance.open({id: 'other'}); + fixtureTwo.componentInstance.open({id: 'other'}); const dialogs = await loader.getAllHarnesses(dialogHarness); expect(await dialogs[0].getId()).toBe('my-dialog'); expect(await dialogs[1].getId()).toBe('other'); @@ -75,7 +78,7 @@ export function runHarnessTests( it('should be able to get role of dialog', async () => { fixture.componentInstance.open({role: 'alertdialog'}); - fixture.componentInstance.open({role: 'dialog'}); + fixtureTwo.componentInstance.open({role: 'dialog'}); fixture.componentInstance.open({role: undefined}); const dialogs = await loader.getAllHarnesses(dialogHarness); expect(await dialogs[0].getRole()).toBe('alertdialog'); @@ -85,7 +88,7 @@ export function runHarnessTests( it('should be able to get aria-label of dialog', async () => { fixture.componentInstance.open(); - fixture.componentInstance.open({ariaLabel: 'Confirm purchase.'}); + fixtureTwo.componentInstance.open({ariaLabel: 'Confirm purchase.'}); const dialogs = await loader.getAllHarnesses(dialogHarness); expect(await dialogs[0].getAriaLabel()).toBe(null); expect(await dialogs[1].getAriaLabel()).toBe('Confirm purchase.'); @@ -93,7 +96,7 @@ export function runHarnessTests( it('should be able to get aria-labelledby of dialog', async () => { fixture.componentInstance.open(); - fixture.componentInstance.open({ariaLabelledBy: 'dialog-label'}); + fixtureTwo.componentInstance.open({ariaLabelledBy: 'dialog-label'}); const dialogs = await loader.getAllHarnesses(dialogHarness); expect(await dialogs[0].getAriaLabelledby()).toBe(null); expect(await dialogs[1].getAriaLabelledby()).toBe('dialog-label'); @@ -101,7 +104,7 @@ export function runHarnessTests( it('should be able to get aria-describedby of dialog', async () => { fixture.componentInstance.open(); - fixture.componentInstance.open({ariaDescribedBy: 'dialog-description'}); + fixtureTwo.componentInstance.open({ariaDescribedBy: 'dialog-description'}); const dialogs = await loader.getAllHarnesses(dialogHarness); expect(await dialogs[0].getAriaDescribedby()).toBe(null); expect(await dialogs[1].getAriaDescribedby()).toBe('dialog-description'); @@ -109,7 +112,7 @@ export function runHarnessTests( it('should be able to close dialog', async () => { fixture.componentInstance.open({disableClose: true}); - fixture.componentInstance.open(); + fixtureTwo.componentInstance.open(); let dialogs = await loader.getAllHarnesses(dialogHarness); expect(dialogs.length).toBe(2); diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index 31e78075329c..e12f04b72789 100644 --- a/tools/public_api_guard/material/dialog.md +++ b/tools/public_api_guard/material/dialog.md @@ -113,6 +113,7 @@ export abstract class _MatDialogBase implemen readonly afterAllClosed: Observable; get afterOpened(): Subject>; closeAll(): void; + _dialogOpenedWithinPreviousTransitionTime(): boolean; // (undocumented) _getAfterAllClosed(): Subject; getDialogById(id: string): MatDialogRef | undefined; @@ -290,6 +291,9 @@ export class MatDialogTitle implements OnInit { // @public export function throwMatDialogContentAlreadyAttachedError(): void; +// @public +export const _transitionTime = 150; + // (No @packageDocumentation comment for this package) ```