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.

Author: crisbeto

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() {

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({