From 82b35d08476f9936d27095522d4b818e3afc5c73 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 23 Aug 2018 22:26:22 +0200
Subject: [PATCH] fix(stepper): handle removing a step before the current one
 (#11813)

Fixes an error that is thrown by the stepper if a step before the current one is removed.

Fixes #11791.
---
 src/cdk/stepper/stepper.ts      |  6 ++++++
 src/lib/stepper/stepper.spec.ts | 21 ++++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 295e17d16087..5d9ab232b58c 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -244,6 +244,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
       .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
 
     this._keyManager.updateActiveItemIndex(this._selectedIndex);
+
+    this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+      if (!this.selected) {
+        this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
+      }
+    });
   }
 
   ngOnDestroy() {
diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
index 7aa19ef3da55..05cfe31be3a4 100644
--- a/src/lib/stepper/stepper.spec.ts
+++ b/src/lib/stepper/stepper.spec.ts
@@ -388,6 +388,24 @@ describe('MatStepper', () => {
       expect(headers.every(header => header.getAttribute('aria-setsize') === '3')).toBe(true);
     });
 
+    it('should adjust the index when removing a step before the current one', () => {
+      const stepperComponent: MatVerticalStepper = fixture.debugElement
+          .query(By.css('mat-vertical-stepper')).componentInstance;
+
+      stepperComponent.selectedIndex = 2;
+      fixture.detectChanges();
+
+      // Re-assert since the setter has some extra logic.
+      expect(stepperComponent.selectedIndex).toBe(2);
+
+      expect(() => {
+        fixture.componentInstance.showStepTwo = false;
+        fixture.detectChanges();
+      }).not.toThrow();
+
+      expect(stepperComponent.selectedIndex).toBe(1);
+    });
+
   });
 
   describe('icon overrides', () => {
@@ -1038,7 +1056,7 @@ class SimpleMatHorizontalStepperApp {
           <button mat-button matStepperNext>Next</button>
         </div>
       </mat-step>
-      <mat-step>
+      <mat-step *ngIf="showStepTwo">
         <ng-template matStepLabel>Step 2</ng-template>
         Content 2
         <div>
@@ -1058,6 +1076,7 @@ class SimpleMatHorizontalStepperApp {
 })
 class SimpleMatVerticalStepperApp {
   inputLabel = 'Step 3';
+  showStepTwo = true;
 }
 
 @Component({