Skip to content

Commit

Permalink
fix(material-experimental/mdc-dialog): implement delayFocusTrap option
Browse files Browse the repository at this point in the history
When I added the `delayFocusTrap` option in angular#24121, I assumed that it would be inherited into the MDC dialog. Since it looks like that's not actually the case, these changes implement it.
  • Loading branch information
crisbeto committed Apr 4, 2022
1 parent eee19f7 commit 0e02953
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 17 deletions.
3 changes: 1 addition & 2 deletions src/material-experimental/mdc-dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

/**
Expand Down
30 changes: 17 additions & 13 deletions src/material/dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,10 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
if (this._document) {
this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
}

if (!this._config.delayFocusTrap) {
this._trapFocus();
}
}

/**
Expand Down Expand Up @@ -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});
}
}

/**
Expand Down Expand Up @@ -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});
Expand All @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions tools/public_api_guard/material/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 0e02953

Please sign in to comment.