fix(stepper): handle keyboard interactions if direction changes after…

… init (#11067)

Currently the stepper checks for its direction once on init, in order to configure its keyboard control direction, however this doesn't account for the cases where the direction changes dynamically afterwards. These changes ensure that the keyboard controls are correct in case the layout direction changes.

src/cdk/stepper/stepper.ts

@@ -33,7 +33,8 @@ import {
 } from '@angular/core';
 import {AbstractControl} from '@angular/forms';
 import {CdkStepLabel} from './step-label';
-import {Subject} from 'rxjs';
+import {Observable, Subject, of as obaservableOf} from 'rxjs';
+import {startWith, takeUntil} from 'rxjs/operators';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -215,9 +216,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   ngAfterViewInit() {
     this._keyManager = new FocusKeyManager(this._stepHeader)
       .withWrap()
-      .withHorizontalOrientation(this._layoutDirection())
       .withVerticalOrientation(this._orientation === 'vertical');
 
+    (this._dir ? this._dir.change as Observable<Direction> : obaservableOf())
+      .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
+      .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
+
     this._keyManager.updateActiveItemIndex(this._selectedIndex);
   }
 

src/lib/stepper/stepper.spec.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/cdk/keycodes';
 import {StepperOrientation} from '@angular/cdk/stepper';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
-import {Component, DebugElement} from '@angular/core';
+import {Component, DebugElement, EventEmitter} from '@angular/core';
 import {async, ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing';
 import {
   AbstractControl,
@@ -35,10 +35,13 @@ import {MatStepperIntl} from './stepper-intl';
 const VALID_REGEX = /valid/;
 
 describe('MatStepper', () => {
-  let dir: Direction;
+  let dir: {value: Direction, change: EventEmitter<Direction>};
 
   beforeEach(async(() => {
-    dir = 'ltr';
+    dir = {
+      value: 'ltr',
+      change: new EventEmitter()
+    };
 
     TestBed.configureTestingModule({
       imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule],
@@ -53,7 +56,7 @@ describe('MatStepper', () => {
         LinearStepperWithValidOptionalStep,
       ],
       providers: [
-        {provide: Directionality, useFactory: () => ({value: dir})}
+        {provide: Directionality, useFactory: () => dir}
       ]
     });
 
@@ -410,7 +413,7 @@ describe('MatStepper', () => {
     let fixture: ComponentFixture<SimpleMatVerticalStepperApp>;
 
     beforeEach(() => {
-      dir = 'rtl';
+      dir.value = 'rtl';
       fixture = TestBed.createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
     });
@@ -739,7 +742,7 @@ describe('MatStepper', () => {
     });
 
     it('should reverse arrow key focus in RTL mode', () => {
-      dir = 'rtl';
+      dir.value = 'rtl';
       let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
 
@@ -766,13 +769,27 @@ describe('MatStepper', () => {
     });
 
     it('should reverse arrow key focus in RTL mode', () => {
-      dir = 'rtl';
+      dir.value = 'rtl';
       let fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp);
       fixture.detectChanges();
 
       let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
       assertArrowKeyInteractionInRtl(fixture, stepHeaders);
     });
+
+    it('should reverse arrow key focus when switching into RTL after init', () => {
+      let fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header'));
+      assertCorrectKeyboardInteraction(fixture, stepHeaders, 'horizontal');
+
+      dir.value = 'rtl';
+      dir.change.emit('rtl');
+      fixture.detectChanges();
+
+      assertArrowKeyInteractionInRtl(fixture, stepHeaders);
+    });
   });
 
   describe('valid step in linear stepper', () => {