diff --git a/src/material-experimental/mdc-dialog/dialog-container.ts b/src/material-experimental/mdc-dialog/dialog-container.ts index fad5c1775c54..8fd5c2d7add0 100644 --- a/src/material-experimental/mdc-dialog/dialog-container.ts +++ b/src/material-experimental/mdc-dialog/dialog-container.ts @@ -168,8 +168,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes */ private _finishDialogOpen = () => { this._clearAnimationClasses(); - this._trapFocus(); - this._animationStateChanged.emit({state: 'opened', totalTime: this._openAnimationDuration}); + this._openAnimationDone(this._openAnimationDuration); }; /** diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts index 381ebd560eb5..6d42eac3fb5b 100644 --- a/src/material/dialog/dialog-container.ts +++ b/src/material/dialog/dialog-container.ts @@ -117,6 +117,10 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet { if (this._document) { this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom(); } + + if (!this._config.delayFocusTrap) { + this._trapFocus(); + } } /** @@ -293,6 +297,18 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet { const activeElement = _getFocusedElementPierceShadowDom(); return element === activeElement || element.contains(activeElement); } + + /** + * Callback for when the open dialog animation has finished. Intended to + * be called by sub-classes that use different animation implementations. + */ + protected _openAnimationDone(totalTime: number) { + if (this._config.delayFocusTrap) { + this._trapFocus(); + } + + this._animationStateChanged.next({state: 'opened', totalTime}); + } } /** @@ -330,11 +346,7 @@ export class MatDialogContainer extends _MatDialogContainerBase { /** Callback, invoked whenever an animation on the host completes. */ _onAnimationDone({toState, totalTime}: AnimationEvent) { if (toState === 'enter') { - if (this._config.delayFocusTrap) { - this._trapFocus(); - } - - this._animationStateChanged.next({state: 'opened', totalTime}); + this._openAnimationDone(totalTime); } else if (toState === 'exit') { this._restoreFocus(); this._animationStateChanged.next({state: 'closed', totalTime}); @@ -359,14 +371,6 @@ export class MatDialogContainer extends _MatDialogContainerBase { this._changeDetectorRef.markForCheck(); } - override _initializeWithAttachedContent() { - super._initializeWithAttachedContent(); - - if (!this._config.delayFocusTrap) { - this._trapFocus(); - } - } - _getAnimationState() { return { value: this._state, diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index 89059c5a1e30..961d3e19d229 100644 --- a/tools/public_api_guard/material/dialog.md +++ b/tools/public_api_guard/material/dialog.md @@ -197,8 +197,6 @@ export class MatDialogContainer extends _MatDialogContainerBase { exitAnimationDuration: string; }; }; - // (undocumented) - _initializeWithAttachedContent(): void; _onAnimationDone({ toState, totalTime }: AnimationEvent_2): void; _onAnimationStart({ toState, totalTime }: AnimationEvent_2): void; _startExitAnimation(): void; @@ -231,6 +229,7 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet { protected _focusTrapFactory: FocusTrapFactory; _id: string; _initializeWithAttachedContent(): void; + protected _openAnimationDone(totalTime: number): void; _portalOutlet: CdkPortalOutlet; _recaptureFocus(): void; protected _restoreFocus(): void;