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

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;
@@ -212,9 +213,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}
       ]
     });
 
@@ -388,7 +391,7 @@ describe('MatStepper', () => {
     let fixture: ComponentFixture<SimpleMatVerticalStepperApp>;
 
     beforeEach(() => {
-      dir = 'rtl';
+      dir.value = 'rtl';
       fixture = TestBed.createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
     });
@@ -717,7 +720,7 @@ describe('MatStepper', () => {
     });
 
     it('should reverse arrow key focus in RTL mode', () => {
-      dir = 'rtl';
+      dir.value = 'rtl';
       let fixture = TestBed.createComponent(SimpleMatVerticalStepperApp);
       fixture.detectChanges();
 
@@ -744,13 +747,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', () => {