fix(a11y): focus trap directive not capturing focus if auto capture input is set after init (#19689)

Currently the `cdkTrapFocusAutoCapture` is only checked once on init. These changes make it so that it's respected after initialization as well.

Fixes ##19664.

Author: crisbeto

src/cdk/a11y/focus-trap/focus-trap.spec.ts

@@ -186,6 +186,28 @@ describe('FocusTrap', () => {
         expect(document.activeElement).toBe(buttonOutsideTrappedRegion);
       });
     }));
+
+    it('should capture focus if auto capture is enabled later on', async(() => {
+      const fixture = TestBed.createComponent(FocusTrapWithAutoCapture);
+      fixture.componentInstance.autoCaptureEnabled = false;
+      fixture.componentInstance.showTrappedRegion = true;
+      fixture.detectChanges();
+
+      const buttonOutsideTrappedRegion = fixture.nativeElement.querySelector('button');
+      buttonOutsideTrappedRegion.focus();
+      expect(document.activeElement).toBe(buttonOutsideTrappedRegion);
+
+      fixture.componentInstance.autoCaptureEnabled = true;
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(document.activeElement!.id).toBe('auto-capture-target');
+
+        fixture.destroy();
+        expect(document.activeElement).toBe(buttonOutsideTrappedRegion);
+      });
+    }));
+
   });
 });
 
@@ -205,7 +227,7 @@ class SimpleFocusTrap {
 @Component({
   template: `
     <button type="button">Toggle</button>
-    <div *ngIf="showTrappedRegion" cdkTrapFocus cdkTrapFocusAutoCapture>
+    <div *ngIf="showTrappedRegion" cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
       <input id="auto-capture-target">
       <button>SAVE</button>
     </div>
@@ -214,6 +236,7 @@ class SimpleFocusTrap {
 class FocusTrapWithAutoCapture {
   @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus;
   showTrappedRegion = false;
+  autoCaptureEnabled = true;
 }
 
 

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -19,6 +19,8 @@ import {
   OnDestroy,
   DoCheck,
   isDevMode,
+  SimpleChanges,
+  OnChanges,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
@@ -89,6 +91,7 @@ export class FocusTrap {
     }
 
     this._startAnchor = this._endAnchor = null;
+    this._hasAttached = false;
   }
 
   /**
@@ -378,7 +381,7 @@ export class FocusTrapFactory {
   selector: '[cdkTrapFocus]',
   exportAs: 'cdkTrapFocus',
 })
-export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
+export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoCheck {
   private _document: Document;
 
   /** Underlying FocusTrap instance. */
@@ -425,8 +428,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
     this.focusTrap.attachAnchors();
 
     if (this.autoCapture) {
-      this._previouslyFocusedElement = this._document.activeElement as HTMLElement;
-      this.focusTrap.focusInitialElementWhenReady();
+      this._captureFocus();
     }
   }
 
@@ -436,6 +438,20 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    const autoCaptureChange = changes['autoCapture'];
+
+    if (autoCaptureChange && !autoCaptureChange.firstChange && this.autoCapture &&
+        this.focusTrap.hasAttached()) {
+      this._captureFocus();
+    }
+  }
+
+  private _captureFocus() {
+    this._previouslyFocusedElement = this._document.activeElement as HTMLElement;
+    this.focusTrap.focusInitialElementWhenReady();
+  }
+
   static ngAcceptInputType_enabled: BooleanInput;
   static ngAcceptInputType_autoCapture: BooleanInput;
 }

tools/public_api_guard/cdk/a11y.d.ts

@@ -42,7 +42,7 @@ export declare class CdkMonitorFocus implements AfterViewInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDef<CdkMonitorFocus, never>;
 }
 
-export declare class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
+export declare class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoCheck {
     get autoCapture(): boolean;
     set autoCapture(value: boolean);
     get enabled(): boolean;
@@ -51,6 +51,7 @@ export declare class CdkTrapFocus implements OnDestroy, AfterContentInit, DoChec
     constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _document: any);
     ngAfterContentInit(): void;
     ngDoCheck(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_autoCapture: BooleanInput;
     static ngAcceptInputType_enabled: BooleanInput;