diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index c7b6b33d8bb4..b09d4a87e5c4 100644 --- a/src/cdk/stepper/stepper.ts +++ b/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,7 +281,7 @@ 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, @@ -291,6 +289,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy { selectedStep: stepsArray[newIndex], previouslySelectedStep: stepsArray[this._selectedIndex], }); + this._keyManager.updateActiveItemIndex(newIndex); this._selectedIndex = newIndex; this._stateChanged(); } diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index 46bd4d992e82..35274f9a6ea4 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -566,6 +566,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 = () => {