fix(stepper): not resetting to first step when some of the steps aren't editable (#10804)

Fixes the stepper not going back to the first step when one or more of its steps aren't editable.

Fixes #10801.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -179,9 +179,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
       if (this._selectedIndex != index &&
           !this._anyControlsInvalidOrPending(index) &&
           (index >= this._selectedIndex || this._steps.toArray()[index].editable)) {
-
-        this._emitStepperSelectionEvent(index);
-        this._keyManager.updateActiveItemIndex(this._selectedIndex);
+        this._updateSelectedItemIndex(index);
       }
     } else {
       this._selectedIndex = index;
@@ -237,7 +235,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
 
   /** Resets the stepper to its initial state. Note that this includes clearing form data. */
   reset(): void {
-    this.selectedIndex = 0;
+    this._updateSelectedItemIndex(0);
     this._steps.forEach(step => step.reset());
     this._stateChanged();
   }
@@ -283,14 +281,15 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
     return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
   }
 
-  private _emitStepperSelectionEvent(newIndex: number): void {
+  private _updateSelectedItemIndex(newIndex: number): void {
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({
       selectedIndex: newIndex,
       previouslySelectedIndex: this._selectedIndex,
       selectedStep: stepsArray[newIndex],
       previouslySelectedStep: stepsArray[this._selectedIndex],
     });
+    this._keyManager.updateActiveItemIndex(newIndex);
     this._selectedIndex = newIndex;
     this._stateChanged();
   }

src/lib/stepper/stepper.spec.ts

@@ -588,6 +588,25 @@ describe('MatStepper', () => {
       expect(testComponent.twoGroup.get('twoCtrl')!.valid).toBe(false);
     });
 
+    it('should reset back to the first step when some of the steps are not editable', () => {
+      const steps = stepperComponent._steps.toArray();
+
+      steps[0].editable = false;
+
+      testComponent.oneGroup.get('oneCtrl')!.setValue('value');
+      fixture.detectChanges();
+
+      stepperComponent.next();
+      fixture.detectChanges();
+
+      expect(stepperComponent.selectedIndex).toBe(1);
+
+      stepperComponent.reset();
+      fixture.detectChanges();
+
+      expect(stepperComponent.selectedIndex).toBe(0);
+    });
+
     it('should not clobber the `complete` binding when resetting', () => {
       const steps: MatStep[] = stepperComponent._steps.toArray();
       const fillOutStepper = () => {