Skip to content

Commit 5233a43

Browse files
fix(cdk/stepper): Linear stepper after initialization navigating to previous step issue (#30323)
Set the step as interacted if its linear step and is not the first step. #15449
1 parent abcbf51 commit 5233a43

File tree

2 files changed

+86
-0
lines changed

2 files changed

+86
-0
lines changed

src/cdk/stepper/stepper.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,16 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
402402
if (!this._isValidIndex(this._selectedIndex)) {
403403
this._selectedIndex = 0;
404404
}
405+
406+
// For linear step and selected index is greater than zero,
407+
// set all the previous steps to interacted so that we can navigate to previous steps.
408+
if (this.linear && this._selectedIndex > 0) {
409+
const visitedSteps = this.steps.toArray().slice(0, this._selectedIndex);
410+
411+
for (const step of visitedSteps) {
412+
step._markAsInteracted();
413+
}
414+
}
405415
}
406416

407417
ngOnDestroy() {

src/material/stepper/stepper.spec.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -912,6 +912,27 @@ describe('MatStepper', () => {
912912
});
913913
});
914914

915+
describe('linear stepper with form already filled and on to the last step', () => {
916+
let fixture: ComponentFixture<LinearMatVerticalStepperAppForAlreadyFilledForm>;
917+
let stepper: MatStepper;
918+
919+
beforeEach(() => {
920+
fixture = createComponent(LinearMatVerticalStepperAppForAlreadyFilledForm);
921+
fixture.detectChanges();
922+
stepper = fixture.debugElement.query(By.directive(MatStepper))!.componentInstance;
923+
});
924+
925+
it('should navigate to previous steps', () => {
926+
expect(stepper.selectedIndex).toBe(2);
927+
928+
stepper.previous();
929+
expect(stepper.selectedIndex).toBe(1);
930+
931+
stepper.previous();
932+
expect(stepper.selectedIndex).toBe(0);
933+
});
934+
});
935+
915936
describe('linear stepper with no `stepControl`', () => {
916937
let noStepControlFixture: ComponentFixture<SimpleStepperWithoutStepControl>;
917938
beforeEach(() => {
@@ -1984,6 +2005,61 @@ class SimplePreselectedMatHorizontalStepperApp {
19842005
index = 0;
19852006
}
19862007

2008+
@Component({
2009+
template: `
2010+
<mat-stepper linear [selectedIndex]="selectedIndex()">
2011+
<mat-step [stepControl]="oneGroup">
2012+
<form [formGroup]="oneGroup">
2013+
<ng-template matStepLabel>Step one</ng-template>
2014+
<input formControlName="oneCtrl" required>
2015+
<div>
2016+
<button matStepperPrevious>Back</button>
2017+
<button matStepperNext>Next</button>
2018+
</div>
2019+
</form>
2020+
</mat-step>
2021+
<mat-step [stepControl]="twoGroup">
2022+
<form [formGroup]="twoGroup">
2023+
<ng-template matStepLabel>Step two</ng-template>
2024+
<input formControlName="twoCtrl" required>
2025+
<div>
2026+
<button matStepperPrevious>Back</button>
2027+
<button matStepperNext>Next</button>
2028+
</div>
2029+
</form>
2030+
</mat-step>
2031+
<mat-step [stepControl]="threeGroup" optional>
2032+
<form [formGroup]="threeGroup">
2033+
<ng-template matStepLabel>Step two</ng-template>
2034+
<input formControlName="threeCtrl">
2035+
<div>
2036+
<button matStepperPrevious>Back</button>
2037+
<button matStepperNext>Next</button>
2038+
</div>
2039+
</form>
2040+
</mat-step>
2041+
<mat-step>
2042+
Done
2043+
</mat-step>
2044+
</mat-stepper>
2045+
`,
2046+
imports: [ReactiveFormsModule, MatStepperModule],
2047+
standalone: false,
2048+
})
2049+
class LinearMatVerticalStepperAppForAlreadyFilledForm {
2050+
selectedIndex = signal(2);
2051+
2052+
oneGroup = new FormGroup({
2053+
oneCtrl: new FormControl('test 1', Validators.required),
2054+
});
2055+
twoGroup = new FormGroup({
2056+
twoCtrl: new FormControl('test 2', Validators.required),
2057+
});
2058+
threeGroup = new FormGroup({
2059+
threeCtrl: new FormControl('test 3', Validators.required),
2060+
});
2061+
}
2062+
19872063
@Component({
19882064
template: `
19892065
<mat-stepper linear>

0 commit comments

Comments
 (0)