fixup! feat(material-experimental): MDC-based version of dialog

Fix changed after checked expression w/ form-field focus host bindings

Author: devversion

src/material-experimental/mdc-dialog/dialog-container.ts

@@ -76,10 +76,6 @@ export class MatDialogContainer extends _MatDialogContainerBase implements
   }
 
   ngAfterViewInit() {
-    // Delegate to the after view init method from the base dialog container. This
-    // will capture the previously focused element (for later restoring), and will
-    // set focus to the dialog container (assuming that the container is focusable).
-    super.ngAfterViewInit();
     // Note: Usually we would be able to use the MDC dialog foundation here to handle
     // the dialog animation for us, but there are a few reasons why we just leverage
     // their styles and not use the runtime foundation code:

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -336,8 +336,8 @@ describe('MDC-based dialog', () => {
        let container =
            overlayContainerElement.querySelector('mat-mdc-dialog-container') as HTMLElement;
        dispatchKeyboardEvent(document.body, 'keydown', A);
-       dispatchKeyboardEvent(document.body, 'keydown', A, undefined, backdrop);
-       dispatchKeyboardEvent(document.body, 'keydown', A, undefined, container);
+       dispatchKeyboardEvent(backdrop, 'keydown', A);
+       dispatchKeyboardEvent(container, 'keydown', A);
 
        expect(spy).toHaveBeenCalledTimes(3);
      }));
@@ -1055,6 +1055,7 @@ describe('MDC-based dialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const backdrop = overlayContainerElement
         .querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1089,6 +1090,7 @@ describe('MDC-based dialog', () => {
 
         tick(500);
         viewContainerFixture.detectChanges();
+        expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
         const closeButton = overlayContainerElement
           .querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1125,6 +1127,7 @@ describe('MDC-based dialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const closeButton = overlayContainerElement
         .querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1669,6 +1672,20 @@ describe('MDC-based dialog with animations enabled', () => {
        expect(dialogRef.getState()).toBe(MatDialogState.CLOSED);
      }));
 
+  it('should attach the focus trap even if automatic focus is disabled', fakeAsync(() => {
+    dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef,
+      autoFocus: false
+    });
+
+    viewContainerFixture.detectChanges();
+    flush();
+
+    const containerElement = overlayContainer.getContainerElement();
+    expect(containerElement.querySelectorAll('.cdk-focus-trap-anchor').length)
+      .toBeGreaterThan(0);
+  }));
+
   it('should re-focus trigger element when dialog closes', fakeAsync(() => {
        // Create a element that has focus before the dialog is opened.
        let button = document.createElement('button');

src/material/dialog/dialog-container.ts

@@ -17,7 +17,6 @@ import {
 } from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -55,7 +54,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
  */
 @Directive()
 // tslint:disable-next-line:class-name
-export abstract class _MatDialogContainerBase extends BasePortalOutlet implements AfterViewInit {
+export abstract class _MatDialogContainerBase extends BasePortalOutlet {
   protected _document: Document;
 
   /** The portal outlet inside of this container into which the dialog content will be loaded. */
@@ -100,11 +99,12 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet implement
   /** Starts the dialog exit animation. */
   abstract _startExitAnimation(): void;
 
-  /** If the dialog view completes initialization, the open animation starts. */
-  ngAfterViewInit() {
+  /** Initializes the dialog container with the attached content. */
+  _initializeWithAttachedContent() {
+    this._setupFocusTrap();
     // Save the previously focused element. This element will be re-focused
     // when the dialog closes.
-    this._setupFocusTrap();
+    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();
@@ -206,13 +206,13 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet implement
     }
   }
 
-  /**
-   * Sets up the focus trap and saves a reference to the
-   * element that was focused before the dialog was opened.
-   */
+  /** Sets up the focus trap. */
   private _setupFocusTrap() {
     this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+  }
 
+  /** Captures the element that was focused before the dialog was opened. */
+  private _capturePreviouslyFocusedElement() {
     if (this._document) {
       this._elementFocusedBeforeDialogWasOpened = this._document.activeElement as HTMLElement;
     }

src/material/dialog/dialog.spec.ts

@@ -1166,7 +1166,6 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
-
       expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
@@ -1200,6 +1199,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const backdrop = overlayContainerElement
           .querySelector('.cdk-overlay-backdrop') as HTMLElement;
@@ -1235,6 +1235,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const closeButton = overlayContainerElement
         .querySelector('button[mat-dialog-close]') as HTMLElement;
@@ -1271,6 +1272,7 @@ describe('MatDialog', () => {
 
       tick(500);
       viewContainerFixture.detectChanges();
+      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const closeButton = overlayContainerElement
         .querySelector('button[mat-dialog-close]') as HTMLElement;

src/material/dialog/dialog.ts

@@ -263,6 +263,9 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
       .updateSize(config.width, config.height)
       .updatePosition(config.position);
 
+    // Notify the dialog container that the content has been attached.
+    dialogContainer._initializeWithAttachedContent();
+
     return dialogRef;
   }
 

tools/public_api_guard/material/dialog.d.ts

@@ -14,7 +14,7 @@ export declare abstract class _MatDialogBase<C extends _MatDialogContainerBase>
     static ɵfac: i0.ɵɵFactoryDef<_MatDialogBase<any>, never>;
 }
 
-export declare abstract class _MatDialogContainerBase extends BasePortalOutlet implements AfterViewInit {
+export declare abstract class _MatDialogContainerBase extends BasePortalOutlet {
     _animationStateChanged: EventEmitter<DialogAnimationEvent>;
     _ariaLabelledBy: string | null;
     protected _changeDetectorRef: ChangeDetectorRef;
@@ -28,13 +28,13 @@ export declare abstract class _MatDialogContainerBase extends BasePortalOutlet i
     attachDomPortal: (portal: DomPortal) => void;
     constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _changeDetectorRef: ChangeDetectorRef, _document: any,
     _config: MatDialogConfig, _focusMonitor?: FocusMonitor | undefined);
+    _initializeWithAttachedContent(): void;
     _recaptureFocus(): void;
     protected _restoreFocus(): void;
     abstract _startExitAnimation(): void;
     protected _trapFocus(): void;
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
-    ngAfterViewInit(): void;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatDialogContainerBase, never, never, {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatDialogContainerBase, [null, null, null, { optional: true; }, null, null]>;
 }