fix(focus-trap): enabled property not being coerced (#3417)

Author: crisbeto

src/lib/core/a11y/focus-trap.spec.ts

@@ -7,24 +7,24 @@ import {Platform} from '../platform/platform';
 
 describe('FocusTrap', () => {
 
-  describe('with default element', () => {
-
-    let fixture: ComponentFixture<FocusTrapTestApp>;
-    let focusTrapInstance: FocusTrap;
-    let platform: Platform = new Platform();
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FocusTrapDirective, FocusTrapWithBindings, SimpleFocusTrap, FocusTrapTargets],
+      providers: [InteractivityChecker, Platform, FocusTrapFactory]
+    });
 
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        declarations: [FocusTrapDirective, FocusTrapTestApp],
-        providers: [InteractivityChecker, Platform, FocusTrapFactory]
-      });
+    TestBed.compileComponents();
+  }));
 
-      TestBed.compileComponents();
+  describe('with default element', () => {
+    let fixture: ComponentFixture<SimpleFocusTrap>;
+    let focusTrapInstance: FocusTrap;
 
-      fixture = TestBed.createComponent(FocusTrapTestApp);
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleFocusTrap);
       fixture.detectChanges();
       focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap;
-    }));
+    });
 
     it('wrap focus from end to start', () => {
       // Because we can't mimic a real tab press focus change in a unit test, just call the
@@ -41,12 +41,28 @@ describe('FocusTrap', () => {
       focusTrapInstance.focusLastTabbableElement();
 
       // In iOS button elements are never tabbable, so the last element will be the input.
-      let lastElement = platform.IOS ? 'input' : 'button';
+      let lastElement = new Platform().IOS ? 'input' : 'button';
 
       expect(document.activeElement.nodeName.toLowerCase())
           .toBe(lastElement, `Expected ${lastElement} element to be focused`);
     });
 
+    it('should be enabled by default', () => {
+      expect(focusTrapInstance.enabled).toBe(true);
+    });
+
+  });
+
+  describe('with bindings', () => {
+    let fixture: ComponentFixture<FocusTrapWithBindings>;
+    let focusTrapInstance: FocusTrap;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(FocusTrapWithBindings);
+      fixture.detectChanges();
+      focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap;
+    });
+
     it('should clean up its anchor sibling elements on destroy', () => {
       const rootElement = fixture.debugElement.nativeElement as HTMLElement;
 
@@ -73,21 +89,14 @@ describe('FocusTrap', () => {
   });
 
   describe('with focus targets', () => {
-    let fixture: ComponentFixture<FocusTrapTargetTestApp>;
+    let fixture: ComponentFixture<FocusTrapTargets>;
     let focusTrapInstance: FocusTrap;
 
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        declarations: [FocusTrapDirective, FocusTrapTargetTestApp],
-        providers: [InteractivityChecker, Platform, FocusTrapFactory]
-      });
-
-      TestBed.compileComponents();
-
-      fixture = TestBed.createComponent(FocusTrapTargetTestApp);
+    beforeEach(() => {
+      fixture = TestBed.createComponent(FocusTrapTargets);
       fixture.detectChanges();
       focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap;
-    }));
+    });
 
     it('should be able to prioritize the first focus target', () => {
       // Because we can't mimic a real tab press focus change in a unit test, just call the
@@ -106,6 +115,19 @@ describe('FocusTrap', () => {
 });
 
 
+@Component({
+  template: `
+    <div cdkTrapFocus>
+      <input>
+      <button>SAVE</button>
+    </div>
+    `
+})
+class SimpleFocusTrap {
+  @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective;
+}
+
+
 @Component({
   template: `
     <div *ngIf="renderFocusTrap" [cdkTrapFocus]="isFocusTrapEnabled">
@@ -114,7 +136,7 @@ describe('FocusTrap', () => {
     </div>
     `
 })
-class FocusTrapTestApp {
+class FocusTrapWithBindings {
   @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective;
   renderFocusTrap = true;
   isFocusTrapEnabled = true;
@@ -131,6 +153,6 @@ class FocusTrapTestApp {
     </div>
     `
 })
-class FocusTrapTargetTestApp {
+class FocusTrapTargets {
   @ViewChild(FocusTrapDirective) focusTrapDirective: FocusTrapDirective;
 }

src/lib/core/a11y/focus-trap.ts

@@ -222,7 +222,7 @@ export class FocusTrapDirective implements OnDestroy, AfterContentInit {
   /** Whether the focus trap is active. */
   @Input('cdkTrapFocus')
   get enabled(): boolean { return this.focusTrap.enabled; }
-  set enabled(val: boolean) { this.focusTrap.enabled = val; }
+  set enabled(value: boolean) { this.focusTrap.enabled = coerceBooleanProperty(value); }
 
   constructor(private _elementRef: ElementRef, private _focusTrapFactory: FocusTrapFactory) {
     this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);