Skip to content

Commit d89ced1

Browse files
crisbetoannieyw
authored andcommitted
fix(cdk/stepper): error if out-of-bounds index is assigned before initialization (#20766)
Fixes an error if an out-of-bounds index is assigned before the steps are available and the user tries to navigate. Usually we have an assertion that prevents invalid indexes from being assigned, but it doesn't run before initialization, because we don't know how many steps there will be yet. These changes add a check that will revert the index back to 0 if the index is invalid on initialization. Fixes #20735. (cherry picked from commit d3a2718)
1 parent 1630129 commit d89ced1

File tree

2 files changed

+47
-3
lines changed

2 files changed

+47
-3
lines changed

src/cdk/stepper/stepper.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -293,12 +293,11 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
293293

294294
if (this.steps && this._steps) {
295295
// Ensure that the index can't be out of bounds.
296-
if ((newIndex < 0 || newIndex > this.steps.length - 1) &&
297-
(typeof ngDevMode === 'undefined' || ngDevMode)) {
296+
if (!this._isValidIndex(index) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
298297
throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
299298
}
300299

301-
if (this._selectedIndex != newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
300+
if (this._selectedIndex !== newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
302301
(newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
303302
this._updateSelectedItemIndex(index);
304303
}
@@ -365,6 +364,13 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
365364
this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
366365
}
367366
});
367+
368+
// The logic which asserts that the selected index is within bounds doesn't run before the
369+
// steps are initialized, because we don't how many steps there are yet so we may have an
370+
// invalid index on init. If that's the case, auto-correct to the default so we don't throw.
371+
if (!this._isValidIndex(this._selectedIndex)) {
372+
this._selectedIndex = 0;
373+
}
368374
}
369375

370376
ngOnDestroy() {
@@ -525,6 +531,11 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
525531
return stepperElement === focusedElement || stepperElement.contains(focusedElement);
526532
}
527533

534+
/** Checks whether the passed-in index is a valid step index. */
535+
private _isValidIndex(index: number): boolean {
536+
return index > -1 && (!this.steps || index < this.steps.length);
537+
}
538+
528539
static ngAcceptInputType_editable: BooleanInput;
529540
static ngAcceptInputType_optional: BooleanInput;
530541
static ngAcceptInputType_completed: BooleanInput;

src/material/stepper/stepper.spec.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
Provider,
3030
ViewChildren,
3131
QueryList,
32+
ViewChild,
3233
} from '@angular/core';
3334
import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
3435
import {
@@ -1196,6 +1197,24 @@ describe('MatStepper', () => {
11961197
expect(steppers[0].steps.length).toBe(3);
11971198
expect(steppers[1].steps.length).toBe(2);
11981199
});
1200+
1201+
it('should not throw when trying to change steps after initializing to an out-of-bounds index',
1202+
() => {
1203+
const fixture = createComponent(StepperWithStaticOutOfBoundsIndex);
1204+
fixture.detectChanges();
1205+
const stepper = fixture.componentInstance.stepper;
1206+
1207+
expect(stepper.selectedIndex).toBe(0);
1208+
expect(stepper.selected).toBeTruthy();
1209+
1210+
expect(() => {
1211+
stepper.selectedIndex = 1;
1212+
fixture.detectChanges();
1213+
}).not.toThrow();
1214+
1215+
expect(stepper.selectedIndex).toBe(1);
1216+
expect(stepper.selected).toBeTruthy();
1217+
});
11991218
});
12001219

12011220
/** Asserts that keyboard interaction works correctly. */
@@ -1702,3 +1721,17 @@ class StepperWithNgIf {
17021721
class NestedSteppers {
17031722
@ViewChildren(MatStepper) steppers: QueryList<MatStepper>;
17041723
}
1724+
1725+
1726+
@Component({
1727+
template: `
1728+
<mat-vertical-stepper selectedIndex="1337">
1729+
<mat-step label="Step 1">Content 1</mat-step>
1730+
<mat-step label="Step 2">Content 2</mat-step>
1731+
<mat-step label="Step 3">Content 3</mat-step>
1732+
</mat-vertical-stepper>
1733+
`
1734+
})
1735+
class StepperWithStaticOutOfBoundsIndex {
1736+
@ViewChild(MatStepper) stepper: MatStepper;
1737+
}

0 commit comments

Comments
 (0)