Skip to content

Commit

Permalink
fix(stepper): handle removing a step before the current one (#11813)
Browse files Browse the repository at this point in the history
Fixes an error that is thrown by the stepper if a step before the current one is removed.

Fixes #11791.
  • Loading branch information
crisbeto authored and jelbourn committed Aug 23, 2018
1 parent 58f3c54 commit 82b35d0
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 1 deletion.
6 changes: 6 additions & 0 deletions src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
21 changes: 20 additions & 1 deletion src/lib/stepper/stepper.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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>
Expand All @@ -1058,6 +1076,7 @@ class SimpleMatHorizontalStepperApp {
})
class SimpleMatVerticalStepperApp {
inputLabel = 'Step 3';
showStepTwo = true;
}

@Component({
Expand Down

0 comments on commit 82b35d0

Please sign in to comment.