fix(stepper): focus lost if focus is inside stepper while changing step (#12761)

Fixes the user's focus being returned to the body, if they switch the step while focus is inside the stepper. The issue comes from the fact that when the step is collapsed, it becomes hidden which blurs the focused element.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -19,6 +19,7 @@ import {
   ContentChildren,
   Directive,
   EventEmitter,
+  ElementRef,
   forwardRef,
   Inject,
   Input,
@@ -31,6 +32,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import {DOCUMENT} from '@angular/common';
 import {AbstractControl} from '@angular/forms';
 import {CdkStepLabel} from './step-label';
 import {Observable, Subject, of as obaservableOf} from 'rxjs';
@@ -164,6 +166,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   /** Used for managing keyboard focus. */
   private _keyManager: FocusKeyManager<FocusableOption>;
 
+  /**
+   * @breaking-change 8.0.0 Remove `| undefined` once the `_document`
+   * constructor param is required.
+   */
+  private _document: Document | undefined;
+
   /** The list of step components that the stepper is holding. */
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
@@ -218,8 +226,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
 
   constructor(
     @Optional() private _dir: Directionality,
-    private _changeDetectorRef: ChangeDetectorRef) {
+    private _changeDetectorRef: ChangeDetectorRef,
+    // @breaking-change 8.0.0 `_elementRef` and `_document` parameters to become required.
+    private _elementRef?: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) _document?: any) {
     this._groupId = nextId++;
+    this._document = _document;
   }
 
   ngAfterViewInit() {
@@ -305,7 +317,14 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
       selectedStep: stepsArray[newIndex],
       previouslySelectedStep: stepsArray[this._selectedIndex],
     });
-    this._keyManager.updateActiveItemIndex(newIndex);
+
+    // If focus is inside the stepper, move it to the next header, otherwise it may become
+    // lost when the active step content is hidden. We can't be more granular with the check
+    // (e.g. checking whether focus is inside the active step), because we don't have a
+    // reference to the elements that are rendering out the content.
+    this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
+                            this._keyManager.updateActiveItemIndex(newIndex);
+
     this._selectedIndex = newIndex;
     this._stateChanged();
   }
@@ -348,4 +367,15 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   private _layoutDirection(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
   }
+
+  /** Checks whether the stepper contains the focused element. */
+  private _containsFocus(): boolean {
+    if (!this._document || !this._elementRef) {
+      return false;
+    }
+
+    const stepperElement = this._elementRef.nativeElement;
+    const focusedElement = this._document.activeElement;
+    return stepperElement === focusedElement || stepperElement.contains(focusedElement);
+  }
 }

src/lib/stepper/stepper.spec.ts

@@ -259,6 +259,20 @@ describe('MatStepper', () => {
       expect(stepHeaderEl.focus).not.toHaveBeenCalled();
     });
 
+    it('should focus next step header if focus is inside the stepper', () => {
+      let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
+      let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
+      let nextButtonNativeEl = fixture.debugElement
+          .queryAll(By.directive(MatStepperNext))[0].nativeElement;
+      spyOn(stepHeaderEl, 'focus');
+      nextButtonNativeEl.focus();
+      nextButtonNativeEl.click();
+      fixture.detectChanges();
+
+      expect(stepperComponent.selectedIndex).toBe(1);
+      expect(stepHeaderEl.focus).toHaveBeenCalled();
+    });
+
     it('should only be able to return to a previous step if it is editable', () => {
       let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
 

src/lib/stepper/stepper.ts

@@ -17,6 +17,7 @@ import {
   ContentChild,
   ContentChildren,
   Directive,
+  ElementRef,
   EventEmitter,
   forwardRef,
   Inject,
@@ -29,6 +30,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {DOCUMENT} from '@angular/common';
 import {ErrorStateMatcher} from '@angular/material/core';
 import {MatStepHeader} from './step-header';
 import {MatStepLabel} from './step-label';
@@ -147,8 +149,13 @@ export class MatHorizontalStepper extends MatStepper { }
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatVerticalStepper extends MatStepper {
-  constructor(@Optional() dir: Directionality, changeDetectorRef: ChangeDetectorRef) {
-    super(dir, changeDetectorRef);
+  constructor(
+    @Optional() dir: Directionality,
+    changeDetectorRef: ChangeDetectorRef,
+    // @breaking-change 8.0.0 `elementRef` and `_document` parameters to become required.
+    elementRef?: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) _document?: any) {
+    super(dir, changeDetectorRef, elementRef, _document);
     this._orientation = 'vertical';
   }
 }